将HTML表转换为数组（JavaScript）

Question

I would like to convert a HTML table to an array. Where every line of the table is a new object.

Here an example of how the array should look like

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
}];

Here I have an example of my table. The original table has more than 300 rows.

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

Answer 1

You can call methods like Array#slice , Array#map , and Array#reduce on the table.rows and tr.cells NodeLists to convert your table to a nested data structure. This method will support an arbitrary number of columns in your table.

Demo Snippet

 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> 

Answer 2

If you are not comfortable with Array# functions. There is a simple solution:

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