如何使用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();

→

Answer 2

我需要这个确切的东西,除了我需要更多的功能来覆盖列名并忽略任何隐藏的行.我写了一个jQuery插件就是这样,位于这里https://github.com/lightswitch05/table-to-json

为你的例子,你会做:(http://jsfiddle.net/ptVDm/118/)

var table = $('#students').tableToJSON();

需要注意的一点是,id不是结果对象的一部分.你可以从对象的数组位置获取id.或者,如果您真的需要它作为对象的一部分,您可以为ID创建一个隐藏列,然后将它们包括在内

Answer 3

以下应该有效:

var cols = [];
var result = [];
$('#students>thead>th').each(function(){
    cols.push($(this).text().toLowerCase());
});
$('#students>tbody>tr').each(function(id){
    var row = {'id': id+1};
    $(this).find('td').each(function(index){
        row[cols[index]] = $(this).text();
    });
    result.push(row);
});

console.log(result);

基本上,我从表头找到对象属性,接下来我为每一行创建一个对象,为从早期数组推导出的属性名称赋值.

一些明显的缺陷:

• 如果表数据由于某种原因实际上不同(例如,化妆品的空行),则此系统将在结果数组中放置空对象.
• 如果colspan在表中使用属性,则此系统不会自动在不同的对象属性中复制相同的值,而是限制设置为剩余的<td>s.

看到约西亚的方法,它可能比我的快,因为我试图通过找到属性名称变得更聪明.如果您确定您的表结构不会改变,我会推荐他的技术.否则,你需要我的代码行.

哦,为了完整起见,这里有一个JSFiddle与我的.