将Html表转换为JSON

Question

我已经创建了一个示例应用程序,它将html表转换为JSON.问题是JSON没有重复值,我想从JSON中删除最后两列.

我生成的JSON如下所示

[
   {
      "Person Name":"Smith",
      "Score":"disqualified",
      "Price":"150",
      "Tax":"41"
   },
   {
      "Person Name":"Jackson",
      "Score":"94",
      "Price":"250",
      "Tax":"81"
   },
   {
      "Person Name":"Doe",
      "Score":"80",
      "Price":"950",
      "Tax":"412"
   },
   {
      "Person Name":"Johnson",
      "Score":"67",
      "Price":"750",
      "Tax":"941"
   }
]

但我期望的JSON就像

[
   {
      "Person Name":"Jill",
      "Person Name":"Smith",
      "Score":"disqualified"
   },
   {
      "Person Name":"Eve",
      "Person Name":"Smith",
      "Score":"94"
   },
   {
      "Person Name":"John",
      "Person Name":"Smith",
      "Score":"80"
   },
   {
      "Person Name":"Adam",
      "Person Name":"Smith",
      "Score":"67"
   }
]

任何人都可以告诉我如何从表中生成上述JSON

我的代码如下所示.

HTML代码

<table id='example-table'>
    <thead>
    <tr>
        <th>Person Name</th>
        <th>Person Name</th>
        <th data-override="Score">Points</th>
        <th>Price</th>
        <th>Tax</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td data-override="disqualified">50</td>
        <td>150</td>
        <td>41</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>250</td>
        <td>81</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>950</td>
        <td>412</td>
    </tr>
    <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
        <td>750</td>
        <td>941</td>
    </tr>
    </tbody>
</table>
<button id="convert-table" >Convert!</button>

javascript代码

$('#convert-table').click( function() {
  var table = $('#example-table').tableToJSON();
  console.log(table);
  alert(JSON.stringify(table));  
});

演示(JSFiddle)

Answer 1

类似的东西会工作(不是很好,但)

说明:

您可以使用ignoreColumns来避免使用第3列和第4列.

您可以使用标题来更改"标题"(json文件中的键).但这也将采取第一行(TH的那一行).

所以我们必须在构建json数组后删除第一行.

$('#convert-table').click( function() {
    var $table = $('#example-table');

    var table = $table.tableToJSON(
                      {
                         ignoreColumns:[3, 4], 
                         headings: ['FirstName', 'LastName', 'Score']
                       });
    var newTable = $.map(table, function(e){
        return (e.FirstName == "Person Name") ? null : e;
    });
    console.log(newTable);
    alert(JSON.stringify(newTable));  
});

见jsfiddle

编辑

如果具有Person Name的列数是动态的,您可以执行类似的操作(假设您从不想要最后两行)

function convertToTable(el, numberOfColumns, columnNames) {
    var columnsToIgnore = [numberOfColumns-2, numberOfColumns-1];
    var table = el.tableToJSON(
        {
            ignoreColumns:columnsToIgnore, 
            headings: columnNames
        });
    var result = $.map(table, function(e){
        return (e['Person Name0'] == "Person Name") ? null : e;
    });
    alert(JSON.stringify(result));
}

$('#convert-table').click( function() {
    var $table = $('#example-table');
    var columns = $table.find('th');
    var numberOfColumns = columns.length;    
    var columnNames = columns.map(function(index) {
        var text = $(this).text();
        return text == 'Person Name' ? text + index : text;
    }).get();

  convertToTable($table, numberOfColumns, columnNames); 
});

见JsFiddle