网页表格抓取(在ASP.NET中表格的显式方法利用JS来取页面表格数据)
优采云 发布时间: 2022-01-09 21:13网页表格抓取(在ASP.NET中表格的显式方法利用JS来取页面表格数据)
ASP.NET中有各种显式的表格方法，例如html标签、asp服务器控件GridView、Repeater控件等，都可以帮助我们在页面上显示表格信息。GridView控件更强大，它有自己的属性和方法，可以用来对显式表数据进行各种操作。但是如果使用传统的html标签或者Repeater控件来展示数据，那么如何获取选中行的数据呢？这里我们将介绍使用JS获取页表数据的方法。
如图所示，我们需要对表中的数据进行编辑、删除等操作。
下面是一个Repeater控件的例子：
(1）页表：定义表头，设置数据绑定（有些操作需要获取数据的主键，考虑实际情况，我们应该隐藏主键，对应列使用隐藏属性） ）这就够了）。在后台，只需要将Repeater绑定到对应的数据源即可。这里我们使用class来标记按钮，这样在JS中就可以将所有具有相同class的按钮作为一个组取出来。因此，我们可以在 JS 中监控和选择按钮。设置相应的行。
1 出货单单头:
2
3
4
5
6 ID
7 客户ID
8 出货人员
9 创建时间
10 更新时间
11 编辑
12 删除
13 新增子信息
14
15
16
17
18
19
20
21
22
23
24 编辑
25
26
27 删除
28
29
30 新增子信息
31
32
33
34
35
(2）JS部分：通过class获取对应的一组按钮并设置监控。然后通过标签名获取选中行，通过标签名获取选中行所有列数据的集合，并进行转换对应的数据通过 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 来获取表格数据。你可以多尝试，然后比较总结，这也是对程序员自身的一种提升。
