[分享·JavaScript]提取Table中的内容到XML对象
在公司工作的时候,经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理。
所以,在今天抽时间写了这么一个JS类,见笑了。
下面的JS请保存为“TableProcess.js”
1
2
3
4
5
6
7
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105 |
//***************获取Table中的数据,并提供Xml内容的支持类*********** //获取指定id对应的Table对象 function
TableXmlEngen(oTab) { var
oTable; if
(!oTab) { } else
{ oTable = oTab; } this .Init = function (oTab) { oTable = oTab; }; //返回属性满足要求的所有行的数组对象 this .getRows = function (oTable, sJuageAttr, sFitValue) { var
nIndex = 0; var
oRows = new
Array(); for
(nIndex = 0; nIndex < oTable.rows.length; nIndex++) { if
(oTable.rows[nIndex].getAttribute(sJuageAttr) == sFitValue) { //add to array oRows.push(oTable.rows[nIndex]); } else
if
(!sJuageAttr || !sFitValue) { //如果第二、三任何一个数据不存在,则表示不过滤 oRows.push(oTable.rows[nIndex]); } } return
oRows; }; //返回一行的所有的列的属性值 //依赖于:getUseAttributes this .getRowProperty = function (oRow) { var
oPropertys = []; var
nIndex = 0; for
(nIndex = 0; nIndex < oRow.cells.length; nIndex++) { oPropertys.push(getUseAttributes(oRow.cells[nIndex])); } return
oPropertys; }; //返回的是键值对的集合,name:value; //函数返回所有的有意义的属性和属性值,默认的空白属性和属性值都不会返回 this .getUseAttributes = function (oUnit) { var
nIndex = 0; var
oAttrs = []; var
oTmpData = {}; for
(nIndex = 0; nIndex < oUnit.attributes.length; nIndex++) { var
oAttribute = oUnit.attributes[nIndex]; if
(oAttribute.value != "null"
&& !oAttribute.value == false ) { oTmpData = { name: oAttribute.name, value: oAttribute.value }; oAttrs.push(oTmpData); } } return
oAttrs; }; this .getRowData = function (oRow) { var
oRowData = []; var
nIndex = 0; for
(nIndex = 0; nIndex < oRow.cells.length; nIndex++) { if
(!oRow.cells[nIndex].getAttribute( "name" )) { var
oDic = { name: "name"
+ nIndex, value: oRow.cells[nIndex].innerHTML }; oRowData.push(oDic); } else
{ var
oDic = { name: oRow.cells[nIndex].getAttribute( "name" ), value: oRow.cells[nIndex].innerHTML }; oRowData.push(oDic); } } oRowData.appendData = function (oXml, oTopNode) { var
oNewNode = oXml.createElement( "data" ); var
nIndex = 0; oTopNode.appendChild(oNewNode); for
(nIndex = 0; nIndex < oRowData.length; nIndex++) { var
oNode = oXml.createElement( "data-collum" ); var
oNodeText = oXml.createTextNode(oRowData[nIndex].value); oNode.setAttribute( "name" , oRowData[nIndex].name); oNode.appendChild(oNodeText); oNewNode.appendChild(oNode); } return ; }; return
oRowData; }; this .getTableData = function (sRowType, sTypeValue) { var
nIndex = 0; var
oTableInfo = []; var
oRows = getRows(oTable, sRowType, sTypeValue); for
(nIndex = 0; nIndex < oRows.length; nIndex++) { oTableInfo.push(getRowData(oRows[nIndex])); } oTableInfo.createXmlObj = function () { var
sXml = "" ; var
nIndex = 0; var
oXml = new
ActiveXObject( "Microsoft.XMLDOM" ); //先创建好一个空的Xml对象 var
oTopNode = oXml.createElement( "SunSoft_Data" ); //创建一个顶级节点 oXml.appendChild(oTopNode); //将这个顶级节点加到Xml对象上 //oTopNode是顶级Node(节点) for
(nIndex = 0; nIndex < oTableInfo.length; nIndex++) { oTableInfo[nIndex].appendData(oXml, oTopNode); //为顶级节点增加子节点,每个子节点代表一行的数据,调用的是oRowData.appendData方法 } return
oXml; } return
oTableInfo; }; } |
下面是测试的页面源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>测试获取表格数据</title> <script type="text/javascript" src="TableProcess.js"></script> <script language="JavaScript" type="text/javascript"> //传入table标签的id function onBtnTryTable() { var oTable = document.getElementById("TestTable"); var oTableXmlObj = new TableXmlEngen(oTable); var oDataObj = oTableXmlObj.getTableData("row-type", "data"); var oXmlObj = oDataObj.createXmlObj(); alert(oXmlObj.xml); } </script> <style type="text/css"> .style1 { width: 100%; } </style> </head> <body> <table class="style1" id="TestTable"> <tr row-type="data"> <td name="username"> 张三 </td> <td name="usercode"> zhangs01 </td> </tr> <tr row-type="data"> <td name="username"> 李四 </td> <td name="usercode"> lis01 </td> </tr> <tr row-type="data"> <td name="username"> 王二麻子 </td> <td name="usercode"> wangemz</data-collum> </td> <td name="sex"> boy </td> </tr> </table> <p> <input id="btnTryTable" type="button" value="获取表格数据" onclick="return onBtnTryTable();" /></p> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。