jQuery HTML 表格转 JSON

HTML Table to JSON

提问by Nate

I need to take table rows and convert to JSON.

我需要获取表格行并转换为 JSON。

Any ideas? I have this code here but it does not work.

有任何想法吗？我这里有这个代码，但它不起作用。

function tableToJSON(tableID) {
    return $(tableID + "  tr").map(function (row) {
        return row.descendants().pluck("innerHTML");
    }).toJSON();
}

回答by slandau

function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }

    // go through cells
    for (var i=1; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.push(rowData);
    }       

    return data;
}

Taken from John Dyer's Blog

摘自John Dyer 的博客

回答by lightswitch05

I was unhappy with all the solutions above and ended up writing my own jQuery plugin to accomplish this. It is very similar to the solution but accepts several options to customize the results, such as ignoring hidden rows, overriding column names, and overriding cell values

我对上述所有解决方案都不满意，最终编写了自己的 jQuery 插件来实现这一目标。它与解决方案非常相似，但接受多个选项来自定义结果，例如忽略隐藏的行、覆盖列名称和覆盖单元格值

The plugin can be found here along with some examples if this is more what your looking for: https://github.com/lightswitch05/table-to-json

如果这更符合您的要求，可以在此处找到该插件以及一些示例：https: //github.com/lightswitch05/table-to-json

回答by Dana Spitzer Friedlander

This one worked for me: (I had only 2 lines in my table, th and td)

这个对我有用：（我的表中只有 2 行，th 和 td）

function htmlToJson(table) {
    var obj = {},
        itemsLength = $(table.find('tbody tr')[0]).find('th').length;
    for (i=0;i<itemsLength;i++) {
        key = $(table.find('tbody tr')[0]).find('th').eq(i).text();
        value = $(table.find('tbody tr')[1]).find('td').eq(i).text();
        obj[key] = value;
    }
    return JSON.stringify(obj)
}

回答by Saul Berardo

try $("#"+tableID + " tr")instead.

试试吧$("#"+tableID + " tr")。

回答by Dave Ward

You should find this helpful: http://encosia.com/use-jquery-to-extract-data-from-html-lists-and-tables/

您应该会发现这很有帮助：http: //encosia.com/use-jquery-to-extract-data-from-html-lists-and-tables/

回答by Dave Ward

HTML:

HTML：

<table id="answered">
<tbody>
    <tr>
      <td data-id="user.email">[email protected]</td>
      <td data-id="meme.yodawg">Yo Dog! I Heard you liked answers, so I answered your question, with a method wrapped in a jQuery plugin!</td>
    </tr>
</tbody>
</table>

jQuery:

jQuery：

(function($) {

  $.extend($.fn, {

    tableRowsToJSONWithFilter : function (filter) {
      var tableSelector = this, item, attr, data, _JSON = [];
      if (typeof(tableSelector) !== 'object') {
        return new Error('Invalid tableSelect!');
      };
      $(tableSelector, 'tr').each(function(index, tr) {
        item = {};
        $('td', $(this)).each(function(index, td) {
          attr = $(td).attr('data-id');
          data = $(td).text();
          if (attr !== undefined && data !== '' && filter && new RegExp(filter, 'i').test(attr)) {
            item[attr] = data;
          };
        });
        _JSON.push(item);
      });
      return _JSON;
    }

  })

})(jQuery);

Usage:

用法：

$('#answered').tableRowsToJSONWithFilter('yodawg');

回答by Flavio Ariano

HTML table with thead and tbody:

带有 thead 和 tbody 的 HTML 表格：

    function htmlTableToJson(table, edit = 0, del = 0) {
        // If exists the cols: "edit" and "del" to remove from JSON just pass values = 1 to edit and del params
        var minus = edit + del;
        var data = [];
        var colsLength = $(table.find('thead tr')[0]).find('th').length - minus;
        var rowsLength = $(table.find('tbody tr')).length;

        // first row needs to be headers
        var headers = [];
        for (var i=0; i<colsLength; i++) {
            headers[i] = $(table.find('thead tr')[0]).find('th').eq(i).text();
        }

        // go through cells
        for (var i=0; i<rowsLength; i++) {
            var tableRow = $(table.find('tbody tr')[i]);
            var rowData = {};
            for (var j=0; j<colsLength; j++) {
                rowData[ headers[j] ] = tableRow.find('td').eq(j).text();
            }
            data.push(rowData);
        }       
        return data;
    }