拖拉表格的JS函数


Posted in Javascript onNovember 20, 2008

JS: 

/* 
@parem object the tbody's object 
@parem object tr's object (must be null) 
@parem string the className of onmousedown 
@parem string the className of onmouseout 
*/ 
function order(tt,old,classover,classout) { 
var sf = arguments.callee; //get the function self 
var trs = tt.getElementsByTagName('tr'); 
for(var i=0;i<trs.length;i++) { 
trs[i].onmousedown = function () { 
if(this.style.cursor == 'move') { 
return false; 
} 
classout = this.className; 
this.className = classover; 
this.style.cursor = 'move'; 
old = this; 
} 
trs[i].onmouseover = function () { 
if(this.style.cursor == 'move' || !old) { 
return false; 
} 
var tmp_old = old.cloneNode(true); 
var tmp_now = this.cloneNode(true); 
var p = this.parentNode; 
p.replaceChild(tmp_now,old); 
p.replaceChild(tmp_old,this); 
sf(tt,tmp_old,classover,classout); 
} 
trs[i].onmouseout = function () { 
//this.className = classout; 
} 
trs[i].onmouseup = function () { 
this.className = classout; 
this.style.cursor = ''; 
old = null; 
} 
} 
}

示例: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
<script src="js/ajax.js"></script> 
<script src="js/global.js"></script> 
<style type="text/css"> 
.table { 
background-color:red; 
} 
.table td { 
background-color:#eeeeee; 
} 
.now td{ 
background-color:red; 
} 
</style> 
<script type="text/javascript"> 
<!-- 
window.onload = function () { 
order(document.getElementById('tt'),null,"now"); 
} 
/* 
@parem object the tbody's object 
@parem object tr's object (must be null) 
@parem string the className of onmousedown 
@parem string the className of onmouseout 
*/ 
function order(tt,old,classover,classout) { 
var sf = arguments.callee; //get the function self 
var trs = tt.getElementsByTagName('tr'); 
for(var i=0;i<trs.length;i++) { 
trs[i].onmousedown = function () { 
if(this.style.cursor == 'move') { 
return false; 
} 
classout = this.className; 
this.className = classover; 
this.style.cursor = 'move'; 
old = this; 
} 
trs[i].onmouseover = function () { 
if(this.style.cursor == 'move' || !old) { 
return false; 
} 
var tmp_old = old.cloneNode(true); 
var tmp_now = this.cloneNode(true); 
var p = this.parentNode; 
p.replaceChild(tmp_now,old); 
p.replaceChild(tmp_old,this); 
sf(tt,tmp_old,classover,classout); 
} 
trs[i].onmouseout = function () { 
//this.className = classout; 
} 
trs[i].onmouseup = function () { 
this.className = classout; 
this.style.cursor = ''; 
old = null; 
} 
} 
} 
//--> 
</script> 
<body> 
<table border="0" cellpadding="0" cellspacing="1" class="table"> 
<tbody> 
<tr > 
<td>ID</td> 
<td>记录</td> 
</tr> 
</tbody> 
<tbody id="tt"> 
<tr > 
<td>1</td> 
<td>记录</td> 
</tr> 
<tr> 
<td>2</td> 
<td>记录</td> 
</tr> 
<tr> 
<td>3</td> 
<td>记录</td> 
</tr> 
<tr> 
<td>4</td> 
<td>记录</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 #Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 #Javascript
$.ajax json数据传递方法
Nov 19 #Javascript
jquery $.ajax入门应用二
Nov 19 #Javascript
jquery $.ajax入门应用一
Nov 19 #Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 #Javascript
仿迅雷焦点广告效果(JQuery版)
Nov 19 #Javascript
You might like
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python实现的简单万年历例子分享
2014/04/25 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
简单了解django文件下载方式
2020/02/10 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
售后专员岗位职责
2013/12/08 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
mysqldump进行数据备份详解
2022/07/15 MySQL