将HTML表格转换为JSON

Question

我需要将表格行转换为JSON。

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

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

Answer 1

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

Answer 2

尝试$("#"+tableID + " tr")代替。

Answer 3

您应该有所帮助：

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

的jQuery：http://encosia.com/use-jquery-to-extract-data-from-html-lists-and-tables/

Answer 4

HTML两者

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

用法：

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

Answer 5

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

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

Answer 6

这一个工作：（我只有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) 
} 

Answer 7

HTML表THEAD和TBODY：

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