通過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中監聽並選定相應行。

<label>出貨單單頭:</label>
                    <asp:Repeater ID="Top_Reapter" runat="server">
                        <HeaderTemplate>
                            <table id="Top_Table" border="1">
                                <tr>
                                    <th hidden="hidden">ID</th>
                                    <th>客戶ID</th>
                                    <th>出貨人員</th>
                                    <th>創建時間</th>
                                    <th>更新時間</th>
                                    <th>編輯</th>
                                    <th>刪除</th>
                                    <th>新增子信息</th>
                                </tr>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                                <td hidden="hidden"><%#Eval("ship_key")%></td>
                                <td><%#Eval("customer_id")%></td>
                                <td><%#Eval("ship_man")%></td>
                                <td><%#Eval("create_time")%></td>
                                <td><%#Eval("update_time")%></td>
                                <td>
                                    <button type="button" class="Top_Edit">編輯</button>
                                </td>
                                <td>
                                    <button type="button" class="Top_Delete">刪除</button>
                                </td>
                                <td>
                                    <button type="button" class="Insert_Line">新增子信息</button>
                                </td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate></table></FooterTemplate>
                    </asp:Repeater>

 　　

　　（2）JS部分：通過class來獲取相應的一組button並設置監聽。然后通過標簽名<tr>獲取選中行，通過標簽名<td>獲取選中行所有列數據的一個集合，通過DOM操作將相應的數據顯示在前台指定的位置。

/*編輯單頭信息*/
var Top_Edit = document.getElementsByClassName("Top_Edit");

for (var i = 0; i < Top_Edit.length; i++) {

    Top_Edit[i].index = i;

    Top_Edit[i].onclick = function () {

        var table = document.getElementById("Top_Table");

        /*獲取選中的行 */
        var child = table.getElementsByTagName("tr")[this.index + 1];

        /*獲取選擇行的所有列*/
        var SZ_col = child.getElementsByTagName("td");

        document.getElementById("Edit_id").value = SZ_col[0].innerHTML;
        document.getElementById("edit_customer").value = SZ_col[1].innerHTML;
        document.getElementById("edit_man").value = SZ_col[2].innerHTML;
        document.getElementById("Top_Creat_Time").value = SZ_col[3].innerHTML;
        document.getElementById("Top_Update_Time").value = SZ_col[4].innerHTML;

    }
}

 　　

　　JS獲取表格數據就這么簡單幾步。獲取表格數據還有jQuery等其他方法，可以多去嘗試，然后對比總結，這樣對於程序員本身也是一個提高。