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>
拖拉表格的JS函数
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@