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下测试通过哦。