拖拉表格的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 无提示关闭窗口脚本
Aug 17 Javascript
Jquery之美中不足小结
Feb 16 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
快速入门Vue
Dec 19 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
js中对象和面向对象与Json介绍
2019/01/21 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
Python写入CSV文件的方法
2015/07/08 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Python新手学习标准库模块命名
2020/05/29 Python
python不同系统中打开方法
2020/06/23 Python
python实现人工蜂群算法
2020/09/18 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
一份Java笔试题
2012/02/21 面试题
优秀演讲稿范文
2013/12/29 职场文书
司仪主持词两篇
2014/03/22 职场文书
英语系本科生求职信
2014/07/15 职场文书
档案工作个人总结
2015/03/03 职场文书