javascript 拖动表格行实现代码

代码复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head > <title>无标题页</title> </head> <body> <table id="tb1" border="1" cellpadding="3"> <tr> <th>移动</th> <th>数据</th> <th>数据</th> <th>数据</th> </tr> <tr> <td>*</td> <td>11111111111</td> <td>sdgergserhserhserh</td> <td>awegaw</td> </tr> <tr> <td>*</td> <td>222222222</td> <td>serherwwwwww</td> <td>fafafff</td> </tr> <tr> <td>*</td> <td>333333333</td> <td>qqqqqqqwewer</td> <td>yukyuk</td> </tr> </table> <script type="text/javascript"> var curTr = null; var tb1 = document.getElementById('tb1'); var trs = tb1.getElementsByTagName('tr'); tb1.onselectstart = function(){ if(curTr){ document.selection.empty(); return true; } }; for(var i=1; i<trs.length; i++) { var tds = trs[i].getElementsByTagName('td'); tds[0].style.cursor = 'move'; tds[0].onmousedown = function(){ curTr = this.parentNode; curTr.style.backgroundColor = '#eff'; }; tds[0].onmouseover = function() { if(curTr && curTr != this.parentNode) { this.parentNode.swapNode(curTr); } } } document.body.onmouseup = function(){ if(curTr){ curTr.style.backgroundColor = ''; curTr = null; } }; </script> </body> </html> 注：不兼容firefox，在IE和chrome下测试通过哦。

　　推荐阅读

　　javascript数组去掉重复

总得来说面试的过程还是收获了不少，主要是认清自己的差距到底有多大，知识面到底有多窄，适当打击一下自信心还是有必要的。在这里做一次全面的总结，关于javascript的数组去重问题。考虑一个问题由简到繁相对容易>>>详细阅读

本文标题：javascript 拖动表格行实现代码

地址：http://www.17bianji.com/kaifa2/JS/24604.html

1/2 1