javascript - 如何使用 jQuery 将 HTML 表格转换为 Javascript 对象

Question

我正在尝试转换此 HTML 表格:

代码:

<table id="students" border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr class="student">
            <td>Oscar</td>
            <td>23</td>
            <td>16.5</td>        
        </tr>
        <tr class="student">
            <td>Antonio</td>
            <td>32</td>
            <td>14</td>        
        </tr>
        <tr class="student">
            <td>Jessica</td>
            <td>21</td>
            <td>19</td>        
        </tr>
    </tbody>
</table>​​​​​​

使用 jQuery 转换为 javascript 对象:

var tbl = $('table#students tr').map(function() {
  return $(this).find('td').map(function() {
    return $(this).text();
  }).get();
}).get();

上面的代码将输出以下数组:

["Oscar", "23", "16.5", "Antonio", "32", "14", "Jessica", "21", "19"]

<小时/>

此时一切都很好，但是如果我希望数组内的 javascript 对象具有以下结构，我该怎么办:

[{id:1, name: "Oscar", age: 23, grade: 16.5}, {id:2, name: "Antonio", age: 32, grade: 14}, {id:3, name: "Jessica", age: 21, grade: 19}]

更具体一点...

• id 是从 tr 获取的
• 从每行获取name、age和grade值

<小时/>

我做了这个 jsfiddle 来测试:

http://jsfiddle.net/oscarj24/ptVDm/

谢谢

Answer 1

var tbl = $('#students tr:has(td)').map(function(i, v) {
    var $td =  $('td', this);
        return {
                 id: ++i,
                 name: $td.eq(0).text(),
                 age: $td.eq(1).text(),
                 grade: $td.eq(2).text()               
               }
}).get();

→