通过JS获取页面表格选中行信息

　　在ASP.NET中表格的显式方法多种多样，有html标签<table></table>，有asp服务器控件GridView，还有Repeater控件等都可以帮我们在页面显式表格信息。GridView控件比较强大,它有自带的属性和方法可以用来对显式的表格数据进行各种操作。但是如果使用传统html标签<table></table>或者是Repeater控件来显式数据，又该如何取到选中行的数据呢。这里我们来介绍一下利用JS来取页面表格数据的方法。

　　如图所示，我们需要对表格中的数据实现编辑，删除等操作。

　　下面以Repeater控件为例：

　　（1）页面表格：定义好表头，并设置好数据绑定（有些操作需要取到该条数据的主键，考虑到实际情况，我们应该将主键隐藏，对相应的列使用hidden属性即可）。在后台只需要将Repeater绑定到相应的数据源。这里我们用class来标记button，这样在JS中就可以取出所有的class相同的button作为一组。从而在JS中监听并选定相应行。

 1 <label>出货单单头:</label>
 2                     <asp:Repeater ID="Top_Reapter" runat="server">
 3                         <HeaderTemplate>
 4                             <table id="Top_Table" border="1">
 5                                 <tr>
 6                                     <th hidden="hidden">ID</th>
 7                                     <th>客户ID</th>
 8                                     <th>出货人员</th>
 9                                     <th>创建时间</th>
10                                     <th>更新时间</th>
11                                     <th>编辑</th>
12                                     <th>删除</th>
13                                     <th>新增子信息</th>
14                                 </tr>
15                         </HeaderTemplate>
16                         <ItemTemplate>
17                             <tr>
18                                 <td hidden="hidden"><%#Eval("ship_key")%></td>
19                                 <td><%#Eval("customer_id")%></td>
20                                 <td><%#Eval("ship_man")%></td>
21                                 <td><%#Eval("create_time")%></td>
22                                 <td><%#Eval("update_time")%></td>
23                                 <td>
24                                     <button type="button" class="Top_Edit">编辑</button>
25                                 </td>
26                                 <td>
27                                     <button type="button" class="Top_Delete">删除</button>
28                                 </td>
29                                 <td>
30                                     <button type="button" class="Insert_Line">新增子信息</button>
31                                 </td>
32                             </tr>
33                         </ItemTemplate>
34                         <FooterTemplate></table></FooterTemplate>
35                     </asp:Repeater>

　　（2）JS部分：通过class来获取相应的一组button并设置监听。然后通过标签名<tr>获取选中行，通过标签名<td>获取选中行所有列数据的一个集合，通过DOM操作将相应的数据显示在前台指定的位置。

 1 /*编辑单头信息*/
 2 var Top_Edit = document.getElementsByClassName("Top_Edit");
 3
 4 for (var i = 0; i < Top_Edit.length; i++) {
 5
 6     Top_Edit[i].index = i;
 7
 8     Top_Edit[i].onclick = function () {
 9
10         var table = document.getElementById("Top_Table");
11
12         /*获取选中的行 */
13         var child = table.getElementsByTagName("tr")[this.index + 1];
14
15         /*获取选择行的所有列*/
16         var SZ_col = child.getElementsByTagName("td");
17
18         document.getElementById("Edit_id").value = SZ_col[0].innerHTML;
19         document.getElementById("edit_customer").value = SZ_col[1].innerHTML;
20         document.getElementById("edit_man").value = SZ_col[2].innerHTML;
21         document.getElementById("Top_Creat_Time").value = SZ_col[3].innerHTML;
22         document.getElementById("Top_Update_Time").value = SZ_col[4].innerHTML;
23
24     }
25 }

　　JS获取表格数据就这么简单几步。获取表格数据还有jQuery等其他方法，可以多去尝试，然后对比总结，这样对于程序员本身也是一个提高。