如何使用jQuery将HTML表转换为Javascript对象
我想转换这个HTML表格：
码：
Name Age Grade Oscar 23 16.5 Antonio 32 14 Jessica 21 19
使用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/
谢谢
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();
→
我需要这个确切的东西，除了我需要更多的function来覆盖列名并忽略任何隐藏的行。 我写了一个jQuery插件，就是这样，位于这里https://github.com/lightswitch05/table-to-json
为你的例子，你会做：（ http://jsfiddle.net/ptVDm/118/ ）
var table = $('#students').tableToJSON();
需要注意的一点是，id不是结果对象的一部分。 你可以从对象的数组位置获取id。 或者，如果您真的需要它作为对象的一部分，您可以为ID创建一个隐藏列，然后它们将被包含在内
以下应该有效：
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属性，则此系统不会自动在不同的对象属性中复制相同的值，而是限制设置为剩余的
看到乔赛亚的方法，它可能比我的快，因为我试图通过找到属性名称变得更聪明。 如果您确定您的表格结构不会改变，我会推荐他的技巧。 否则，你需要我的代码行。
哦，为了完整起见， 这里有一个JSFiddle和我的 。
看到更新的小提琴。 附加的数组map是不必要的，因为此时您正在为JSON查找文字对象。
var data = $('table#students tbody tr').map(function(index) { var cols = $(this).find('td'); return { id: index + 1, name: cols[0].innerHTML, // use innerHTML age: (cols[1].innerHTML + '') * 1, // parse int grade: (cols[2].innerHTML + '') * 1 // parse int }; }).get();
尝试以下n列方法
演示： http ： //jsfiddle.net/ptVDm/7/
var tblhdr = $('table#students th').map(function () { return $(this).text(); }).get(); console.log(tblhdr); var tbl = $('table#students tbody tr').map(function(idx, el) { var td = $(el).find('td'); var obj = {id: idx+1}; //Can work on number of columns for (var i = 0; i < tblhdr.length; i++) { obj[tblhdr[i]] = td.eq(i).text(); } return obj; }).get(); console.log(tbl);
Dunno如果jQuery在这种情况下帮助很多，这里是一个简单的JS解决方案，它完全独立于表结构。 它只需要第一行是标题（可以是不同的表节元素），行1+是数据。
该表可以包含任意数量的列或行，如果存在rowspan或colspans，则会导致结果混乱（但jQuery也无法帮助您）。
它可以很容易地适用于专门使用标题部分的属性名称和忽略页脚部分：
function tableToObj(table) { var rows = table.rows; var propCells = rows[0].cells; var propNames = []; var results = []; var obj, row, cells; // Use the first row for the property names // Could use a header section but result is the same if // there is only one header row for (var i=0, iLen=propCells.length; i