javascript - 将 html 表解析为 json jquery

Question

如何将html表格转成json数据？我需要这样的结果。代码必须在jquery上

{"status":"ok","data":[{"name":"Haroldas","number":444,"address":"address"},{"name":"tom","number":999,"address":"rrr"},{"name":"ted","number":333,"address":"kkk"}]}

这是我的 table :

<table id="excel">
  <thead>
    <tr role="row">
      <th>name</th>
      <th>number</th>
      <th>address</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">Haroldas</td>
      <td>444</td>
      <td>address</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">ted</td>
      <td>333</td>
      <td>kkk</td>
    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">tom</td>
      <td>999</td>
      <td>rrr</td>
    </tr>
  </tbody>
</table>

编辑:这里是 jquery 代码，但不完全是因为表中有 thead

$.makeTableToArray = function () {
    var table = $('#excel tr').map(function() {
        return $(this).find('td').map(function() {
            return $(this).html();
        }).get();
    }).get();

    return table;
};

谢谢

Answer 1

你可以这样做:

$.fn.toJson = function(){
  
  if(!this.is('table')){
    return;
    }
  
  var results = [],
      headings = [];
  
  this.find('thead tr th').each(function(index, value){
    headings.push($(value).text());
    });
  

  this.find('tbody tr').each(function(indx, obj){
    var row = { };
    var tds = $(obj).children('td');
    headings.forEach(function(key, index){
      var value = tds.eq(index).text();
      row[key] = value;
      });
    results.push(row);
    });
  
  return results;
  }

$(function(){
  $('#results').html(JSON.stringify($('#excel').toJson(), null, '\t'));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="results"></pre>
<table id="excel">
  <thead>
    <tr role="row">
      <th>name</th>
      <th>number</th>
      <th>address</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="sorting_1">Haroldas</td>
      <td>444</td>
      <td>address</td>
    </tr>
    <tr role="row" class="even">
      <td class="sorting_1">ted</td>
      <td>333</td>
      <td>kkk</td>
    </tr>
    <tr role="row" class="odd">
      <td class="sorting_1">tom</td>
      <td>999</td>
      <td>rrr</td>
    </tr>
  </tbody>
</table>

使用:

  $('tableSelector').toJson();

除了表数据外，您还可以添加这些键。