表格上移下移

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
    <script type="text/javascript">
 function up(obj){
  var tr=obj.parentNode.parentNode;
  var tbody=tr.parentNode;
  var tb=tbody.parentNode;
  var rowIdx=0;
  for(var i=0;i<tb.rows.length;i++){
   if(tb.rows[i]==tr){
    rowIdx=i;
    break;
   }
  }
  if(rowIdx==1)return;
  var preTr=tb.rows[rowIdx-1];
  var nextNextObj=tr.nextSibling;
  tbody.removeChild(preTr);
  if(nextNextObj)tbody.insertBefore(preTr,nextNextObj);
  else tbody.appendChild(preTr);
 }
 function down(obj){
  var tr=obj.parentNode.parentNode;
  var tbody=tr.parentNode;
  var tb=tbody.parentNode;
  var rowIdx=0;
  for(var i=0;i<tb.rows.length;i++){
   if(tb.rows[i]==tr){
    rowIdx=i;
    break;
   }
  }
  if(rowIdx==tb.rows.length-1)return;
  var nextTr=tb.rows[rowIdx+1];
  var nextNextObj=nextTr.nextSibling;
  tbody.removeChild(tr);
  if(nextNextObj)tbody.insertBefore(tr,nextNextObj);
  else tbody.appendChild(tr);
 }
    </script>
  </head>
  <body>
    <table>
    <tr><td>序號</td><td>名字</td><td></td><td></td></tr>
    <tr><td>1</td><td>11111</td><td><a href="javascript:;" onclick="up(this)">上移</a></td>
    <td><a href="javascript:;" onclick="down(this)">下移</a></td></tr>
    <tr><td>2</td><td>22222</td><td><a href="javascript:;" onclick="up(this)">上移</a></td>
    <td><a href="javascript:;" onclick="down(this)">下移</a></td></tr>
    <tr><td>3</td><td>33333</td><td><a href="javascript:;" onclick="up(this)">上移</a></td>
    <td><a href="javascript:;" onclick="down(this)">下移</a></td></tr>
    <tr><td>4</td><td>44444</td><td><a href="javascript:;" onclick="up(this)">上移</a></td>
    <td><a href="javascript:;" onclick="down(this)">下移</a></td></tr>
    <tr><td>5</td><td>55555</td><td><a href="javascript:;" onclick="up(this)">上移</a></td>
    <td><a href="javascript:;" onclick="down(this)">下移</a></td></tr>
    <tr><td>6</td><td>66666</td><td><a href="javascript:;" onclick="up(this)">上移</a></td>
    <td><a href="javascript:;" onclick="down(this)">下移</a></td></tr>
    </table>
  </body>
</html>
相關文章
相關標籤/搜索