拖拉表格的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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
vue-loader教程介绍
Jun 14 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
JS之小练习代码
2008/10/12 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
javascript中Object使用详解
2015/01/26 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
Python中Proxypool库的安装与配置
2018/10/19 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python3实现mysql导出excel的方法
2019/07/31 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
本科生自荐信
2014/06/18 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
初中信息技术教学反思
2016/02/16 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python