将 HTML 表格转换为数组 (JavaScript)答案

【问题标题】：Convert HTML table to Array (JavaScript)将 HTML 表格转换为数组 (JavaScript)
【发布时间】：2017-03-14 15:50:45
【问题描述】：

我想将 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);

<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>

【问题讨论】：

您如何向我们展示您已经尝试过的内容？
jsfiddle.net/qqdwct7h 这个我已经试过了。但这并没有将“显示名称”、“标题”放在每个对象的前面
您要生成的是一个对象数组，因此您应该获取要在键值对中使用的键（提示：<th> 和 <td> 分别是键和值）
这实际上是一个非常好的主意。制作一个以 1 开头的计数器或其他东西，它找到的第一个将“显示名称：”放在它前面。之后，它发现第二个将“标题”放在它前面...我将发布结果：D
实际上，您可以通过一次读取 1 个 <tr> 并将 <th>s 留在数组中，然后根据<td> 内 <tr> ;)

演示片段

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>

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);