我想将HTML表格转换为数组。表格的每一行都是新的对象。
这里有一个如何看待数组的示例
var aSP2010Feature = [{
DisplayName: "AccSrvMSysAso",
Title: "Access Services System Objects",
ID: "29ea7495-fca1-41c6-8ac1-500c247a036e",
Scope: "Web",
Description: blablabla
},
{
DisplayName: "AccSrvRestrictedList",
Title: "Access Services Restricted List Definition",
ID: "a4d4ee2c-a6cb-4591-ab0a-21bb5bde92fb",
Scope: "Web",
Description: blablabla
},
{
DisplayName: "AccSrvShell",
Title: "No Title",
ID: "bcf89eb7-bca1-4589-bdb4-ca27f61a2292",
Scope: "Web",
Description: blablabla
}];
这里有一个我的桌子的例子。原始表有300多行。
<table border='1'><tr><th>Display Name</th><th>Title</th><th>Scope</th><th>ID</th><th>Description</th></tr>
<tr><td>XmlFormLibrary</td><td>XML Form Libraries</td><td>Web</td><td>00bfea71-1e1d-4562-b56a-f05371bb0115</td><td>Provides support for XML form libraries for a site.</td></tr>
<tr><td>LinksList</td><td>Links Lists</td><td>Web</td><td>00bfea71-2062-426c-90bf-714c59600103</td><td>Provides support for links lists for a site.</td></tr>
<tr><td>workflowProcessList</td><td>WorkflowProcessList Feature</td><td>Web</td><td>00bfea71-2d77-4a75-9fca-76516689e21a</td><td>This feature provides the ability to create a list to support running custom form actions.
</td></tr>
</table>
var tdCollection = $("table").find("td");
var array = [];
$.each(tdCollection, function(key, el){
array.push($(el).text());
});
console.log(array);
&#13;
<table>
<tr>
<th>Type</th>
<th>Text</th>
<th>Time</th>
<th>Notification Time</th>
</tr>
<tr>
<td>Lab1</td>
<td>Some Text</td>
<td>Day of Week</td>
<td>Monday, Wednessday</td>
</tr>
<tr>
<td>Lab2</td>
<td>Some Text</td>
<td>Day of Week</td>
<td>Tuesday, Wednessday</td>
</tr>
</table>
&#13;
答案 0 :(得分:2)
call
和Array#slice
NodeLists上的Array#map
,Array#reduce
和table.rows
等tr.cells
方法可以将您的表格转换为嵌套数据结构。此方法将支持表中的任意数量的列。
var rows = [].slice.call($('table')[0].rows)
var keys = [].map.call(rows.shift().cells, function(e) {
return e.textContent.replace(/\s/g, '')
})
var result = rows.map(function(row) {
return [].reduce.call(row.cells, function(o, e, i) {
o[keys[i]] = e.textContent
return o
}, {})
})
console.log(result)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1'>
<tr>
<th>Display Name</th>
<th>Title</th>
<th>Scope</th>
<th>ID</th>
<th>Description</th>
</tr>
<tr>
<td>XmlFormLibrary</td>
<td>XML Form Libraries</td>
<td>Web</td>
<td>00bfea71-1e1d-4562-b56a-f05371bb0115</td>
<td>Provides support for XML form libraries for a site.</td>
</tr>
<tr>
<td>LinksList</td>
<td>Links Lists</td>
<td>Web</td>
<td>00bfea71-2062-426c-90bf-714c59600103</td>
<td>Provides support for links lists for a site.</td>
</tr>
<tr>
<td>workflowProcessList</td>
<td>WorkflowProcessList Feature</td>
<td>Web</td>
<td>00bfea71-2d77-4a75-9fca-76516689e21a</td>
<td>This feature provides the ability to create a list to support running custom form actions.
</td>
</tr>
</table>
答案 1 :(得分:0)
如果您对Array#功能不满意。有一个简单的解决方案:
var tdCollection = $("table").find("tr");
var array = [];
var temp = {
DisplayName: "",
Title: "",
ID: "",
Scope: "",
Description: ""
};
$.each(tdCollection, function(key, el){
var i=0;
var row = $(el).find("td");
for (var f in temp){
temp[f] = $(row[i++]).text()
}
array.push(temp);
});
console.log(array);