拖拉表格的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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
jQuery实现日历效果
Sep 11 jQuery
设置下载不需要倒计时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
聊天室php&amp;mysql(四)
2006/10/09 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
php include类文件超时问题处理
2015/02/06 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
2015年英语教研组工作总结
2015/05/23 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
redis 查看所有的key方式
2021/05/07 Redis
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers