在公司工作的时候，经常需要在前端进行这样的数据提取的操作。而之前的针对每个页面中的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>
[分享·JavaScript]提取Table中的内容到XML对象
原文：http://www.cnblogs.com/sunsoftresearch/p/3533627.html