jquery HTML表格到JSON

wi3ka0sx  于 2022-12-26  发布在  jQuery
关注(0)|答案(8)|浏览(181)

我需要获取表行并转换为JSON。
任何想法?我有这个代码在这里,但它不工作。

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

px9o7tmv1#

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;
}

取自John Dyer's Blog

wvmv3b1j

wvmv3b1j2#

我对上面的所有解决方案都不满意,最后编写了自己的jQuery插件来实现这一点,它与解决方案非常相似,但接受几个选项来定制结果,如忽略隐藏行、覆盖列名和覆盖单元格值
插件可以在这里找到一些例子沿着如果这是更多的你在寻找什么:https://github.com/lightswitch05/table-to-json

zbwhf8kr

zbwhf8kr3#

请尝试$("#"+tableID + " tr")

ugmeyewa

ugmeyewa5#

这一条对我很有效:(我的表中只有两行,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)
}
67up9zun

67up9zun6#

带有标题和正文的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;
    }
xkrw2x1b

xkrw2x1b7#

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

console.log(
  $('#answered').tableRowsToJSONWithFilter('yodawg')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="answered">
  <tbody>
    <tr>
      <td data-id="user.email">email@email.com</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>
ruoxqz4g

ruoxqz4g8#

下面是成功解析合并行的示例。
--合并行示例:

--解析

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

        // first row needs to be headers
        let headers = [];
        for (let i = 0; i < table.rows[0].cells.length; i++) {
            headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase()
            headers[i] = headers[i]
                .replace(new RegExp('<b>', 'gi'), '')
                .replace(new RegExp('</b>', 'gi'), '')
                .replace(new RegExp('\r?\n', 'gi'), '')
                .trim();
        }

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

            let tableRow = table.rows[i];
            let rowData = {};
            let rowSpanValue = ''
            if (table.rows[i - 1] && table.rows[i - 1].cells[0].getAttribute("rowspan"))
                rowSpanValue = table.rows[i - 1].cells[0].innerText

            if (!!rowSpanValue)
                rowData[headers[0]] = rowData[headers[0]] || rowSpanValue

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

                let header = !!rowSpanValue ? headers[j + 1] : headers[j]
                let data = tableRow.cells[j]
                let result;
                if (data.querySelector('a')) {
                    result = tableRow.cells[j].querySelector('a').innerText;
                } else {
                    result = tableRow.cells[j].innerText;
                }
                rowData[header] = (rowData[header] || result).replace(new RegExp('\r?\n', 'gi'), '').trim();
            }

            data.push(rowData);
        }

        return data;
    }

相关问题