拖拉表格的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 相关文章推荐
取得传值的函数
Oct 27 Javascript
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
Jquery使用val方法读写value值
May 18 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
实例讲解JavaScript 计时事件
Jul 04 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使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
JS实现的视频弹幕效果示例
2018/08/17 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python2.7到3.x迁移指南
2018/02/01 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
详解Python的循环结构知识点
2019/05/20 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python三引号如何输入
2020/07/06 Python
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
函授本科自我鉴定
2014/02/04 职场文书
股东协议书范本
2014/04/14 职场文书
医药销售自我评价200字
2014/09/11 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
施工员岗位职责范本
2015/04/11 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
Java Spring Lifecycle的使用
2022/05/06 Java/Android