JavaScript实现表格行的上移,下移

一个表格里面有多行数据,可能你有把某一行,上移 ,下移,移到第一移,最后一行的需求.

为了方便,使用Asp.net中的DataGrid来实现表格.

DataGrid代码

<asp:datagrid id=DataGrid1  runat="server" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:BoundColumn DataField="ID" HeaderText="ID"></asp:BoundColumn>
<asp:BoundColumn DataField="Email" HeaderText="Email"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="操作">
<ItemTemplate>
<INPUT type=button value=First onclick="Move_first(this)">
<INPUT type=button value=Up onclick="Move_up(this)">
<INPUT type=button value=Down onclick="Move_down(this)">
<INPUT type=button value=Last onclick="Move_last(this)">
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>

 

JavaScript代码

    <script language=javascript>
             function Move_up(src)
       {        
         var rowIndex=src.parentElement.parentElement.rowIndex;
         if (rowIndex>=2)
           change_row(rowIndex-1,rowIndex);      
       }
      
       function Move_down(src)
       {
         var rowIndex=src.parentElement.parentElement.rowIndex;
         var tl = document.getElementById("DataGrid1");
         if (rowIndex<tl.rows.length-1)
           change_row(rowIndex+1,rowIndex);
       }
      
       function Move_first(src)
       {
         change_row(1,src.parentElement.parentElement.rowIndex);
       }
      
       function Move_last(src)
       {
          var tl = document.getElementById("DataGrid1");
          change_row(tl.rows.length-1,src.parentElement.parentElement.rowIndex);            
       }
      
      function change_row(line1,line2)
      {
         var tl = document.getElementById("DataGrid1");
         tl.rows[line1].swapNode(tl.rows[line2]);
      }

    </script>

后台读取数据,填充到DataGrid省略.

实际上在表格里面交换两行非常容易.

var tl = document.getElementById("DataGrid1");
tl.rows[line1].swapNode(tl.rows[line2]);

DataGrid1是要交换的表名,line1,line2是要交换的两行的行索引,从0开始计数.

swapNode交换的方法.

src.parentElement.parentElement.rowIndex是得到按钮所在行的行索引,

因为按钮的父结点是<td>,<td>的父结点才是<tr>也就是行,所以用了两次parentElement.

if (rowIndex>=2) 因为表头不参予交换,所以这里面是>=2,如果没有表头,或者表头也要参予交换,

则改写为>=1.