如何使用jQuery将HTML表转换为Javascript对象 [英] How to convert HTML table to Javascript Object with jQuery

问题描述

我正在尝试转换此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>​​​​​​

进入javascript使用jQuery的对象：

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


• 名称，年龄和等级从每一行获取值

• The id is obtained from the tr
• The name, age and grade values are obtained from each row

我做了是jsfiddle测试：

http ：//jsfiddle.net/oscarj24/ptVDm/

谢谢

推荐答案

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

→

这篇关于如何使用jQuery将HTML表转换为Javascript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！