拖拉表格的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 相关文章推荐
一行命令搞定node.js 版本升级
Jul 20 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
JS实现打砖块游戏
Feb 14 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
JS的数组迭代方法
2015/02/05 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
python并发编程之线程实例解析
2017/12/27 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
金融行业务员的自我评价
2013/12/13 职场文书
顶撞领导检讨书
2014/01/29 职场文书
小学新教师培训方案
2014/02/03 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
检讨书怎么写
2015/05/07 职场文书
青涩记忆观后感
2015/06/18 职场文书
《假如》教学反思
2016/02/17 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python