javascript - 如何传递 html 表数据值但不将表的第一行作为 json stringify 对象包含在内

Question

我想问一下。如何将 html 表值传递到 json stringify 对象中？我已经编写了一个代码，我尝试运行它但运行不顺利。也许我的代码中有错误的语法。波纹管是我到目前为止尝试制作的代码。我不知道为什么它不起作用，请帮助我。我是一个想尝试了解新事物的新手

// JavaScript Docume
$(document).on('click','#display_data',function(e){
    var convertTableToJson = function()
        {
            var rows = [];
            $('.table-bordered tr').each(function(i, n){
                var $row = $(n);
                rows.push({
                    $row.find('td:eq(0)').text(),
                    $row.find('td:eq(1)').text(),
                    $row.find('td:eq(2)').text(),
                    $row.find('td:eq(3)').text(),
                    $row.find('td:eq(4)').text(),
                    $row.find('td:eq(5)').text(),
                    $row.find('td:eq(6)').text(),
                    $row.find('td:eq(7)').text(),
                });
            });
            return JSON.stringify(rows);
        };
    $(function(){        
       console.log(convertTableToJson ());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Kode Material</th>
<th>Storage Location</th>
<th>Movement Type</th>
<th>Id Indentifier</th>
<th>Item</th>
<th>Date Input</th>
<th>Netto</th>
<th>Unit</th>
<th><input type="checkbox" id="mycheckbox1" name="mycheckbox1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>101200</td>
<td>WCB</td>
<td>101</td>
<td>5006540050</td>
<td>1</td>
<td>10.08.2017</td>
<td>23.970</td>
<td>KG</td>
<td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
</tr>
<tr>
<td>101200</td>
<td>WCB</td>
<td>101</td>
<td>5006539985</td>
<td>1</td>
<td>10.08.2017</td>
<td>42.970</td>
<td>KG</td>
<td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
</tr>
</tbody>
</table>

也许有人可以帮助我。如果能给我一个示例并说明我的代码无法运行的原因，我将不胜感激。

这是我的代码

Answer 1

试试这个 jquery 的 map().get() 函数。对象需要一个键值对。所以添加 key 和 th 元素文本

已更新

// JavaScript Docume
$(document).on('click', '#display_data', function(e) {
  var h = $('.table-bordered tr th')
  var convertTableToJson = function() {
    var rows = $('.table-bordered tbody tr').map(function(i, n) {
      var obj = {};
      $(this).find('td').each(function(k) {
        obj[h.eq(k).text()] = $(this).text();
      })
      return obj;
    }).get();

    return JSON.stringify(rows);
  };

  $(function() {
    console.log(convertTableToJson());
    console.log(JSON.parse(convertTableToJson()));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Kode Material</th>
      <th>Storage Location</th>
      <th>Movement Type</th>
      <th>Id Indentifier</th>
      <th>Item</th>
      <th>Date Input</th>
      <th>Netto</th>
      <th>Unit</th>
      <th><input type="checkbox" id="mycheckbox1" name="mycheckbox1"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101200</td>
      <td>WCB</td>
      <td>101</td>
      <td>5006540050</td>
      <td>1</td>
      <td>10.08.2017</td>
      <td>23.970</td>
      <td>KG</td>
      <td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
    </tr>
    <tr>
      <td>2323</td>
      <td>WssdCB</td>
      <td>1013</td>
      <td>50036539985</td>
      <td>13</td>
      <td>103.08.2017</td>
      <td>423.970</td>
      <td>KGD</td>
      <td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
    </tr>
  </tbody>
</table>
<button id="display_data">display_data</button>