网页表格抓取(在ASP.NET中表格的显式方法利用JS来取页面表格数据)

　　网页表格抓取(在ASP.NET中表格的显式方法利用JS来取页面表格数据)

　　ASP.NET 中有多种表的显式方法。有html标签、asp服务器控件GridView、Repeater控件等，可以帮助我们在页面上显示表格信息。GridView 控件更强大，它有自己的属性和方法，可用于对显式表数据执行各种操作。但是如果使用传统的html标签或者Repeater控件来显示数据，如何获取选中行的数据呢？这里介绍一下使用JS获取页表数据的方法。

　　如图，我们需要对表中的数据进行编辑和删除。

　　以中继器控件为例：

　　（1）页表：定义表头，设置数据绑定（有些操作需要获取数据的主键，考虑实际情况，我们应该隐藏主键，使用隐藏属性进行对应的列就可以了）。在后台只需要将Repeater绑定到对应的数据源即可，这里我们使用class来标记按钮，这样在JS中就可以把所有同class的按钮作为一组取出. 从而在JS中*敏*感*词*并选择Set对应的行。

　　 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，大家可以多尝试，然后比较总结，这也是对程序员自己的一种改进。