javascript - 将 html 表中未选中的复选框行转换为 javascript 数组

Question

我有一个 HTML 表格，每一行我都有一个复选框，一些带有文本的单元格和一个带有输入字段的单元格，我需要将除选择的行之外的所有行转换为 javascript 数组，所以我然后可以将数组传递给 ajax 并使用 PHP 进行处理。

这是我目前为止尝试过的

var TableData = new Array();

$('.kmg_admin_millesimal_buildings_table tr input[type=checkbox]:not(:checked)').each(function(row, tr) {

  TableData[row] = {

    "Codice": $(tr).find('td:eq(1)').text(),
    "Piano": $(tr).find('td:eq(2)').text(),
    "Interno": $(tr).find('td:eq(3)').text(),
    "Millesimi": $(tr).find('td').eq(4).find('input').val()

  }

});

TableData.shift();
TableData.pop();

console.log(TableData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="kmg_admin_millesimal_buildings_table">
<thead>
  <tr>
    <th class="text-center"> Escludi</th>
    <th class="text-center"> Codice</th>
    <th class="text-center"> Piano</th>
    <th class="text-center"> Interno</th>
    <th> Millesimi</th>
  </tr>
</thead>
<tbody class="kmg_admin_millesimal_buildings_table_body">
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">4E</td>
    <td class="text-center">1</td>
    <td class="text-center">4E</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">9N</td>
    <td class="text-center">2</td>
    <td class="text-center">9N</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">2C</td>
    <td class="text-center">3</td>
    <td class="text-center">2C</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
</tbody>
<tfoot class="custom-table-footer">
  <tr>
    <td colspan="4" class="text-right"></td>
    <td class="km_total_millesimal_table font-green-sharp">0.00</td>
  </tr>
</tfoot>
<table>

错误是数组没有创建

Answer 1

问题是您的选择器针对的是输入，而不是表格行。你可以使用 parent() 来获取行，就像这样。您仍然需要删除 shift() 和 pop()，因为 thead 和 tfoot 中没有输入，所以不需要这些。

var TableData = new Array();

$('.kmg_admin_millesimal_buildings_table tr input[type=checkbox]:not(:checked)').each(function(row, input) {
  var tr = $(input).parent().parent()
  TableData[row] = {

    "Codice": $(tr).find('td:eq(1)').text(),
    "Piano": $(tr).find('td:eq(2)').text(),
    "Interno": $(tr).find('td:eq(3)').text(),
    "Millesimi": $(tr).find('td').eq(4).find('input').val()

  }

});

console.log(TableData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="kmg_admin_millesimal_buildings_table">
<thead>
  <tr>
    <th class="text-center"> Escludi</th>
    <th class="text-center"> Codice</th>
    <th class="text-center"> Piano</th>
    <th class="text-center"> Interno</th>
    <th> Millesimi</th>
  </tr>
</thead>
<tbody class="kmg_admin_millesimal_buildings_table_body">
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">4E</td>
    <td class="text-center">1</td>
    <td class="text-center">4E</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">9N</td>
    <td class="text-center">2</td>
    <td class="text-center">9N</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
  <tr>
    <td class="text-center"><input type="checkbox" class="pippo"></td>
    <td class="text-center">2C</td>
    <td class="text-center">3</td>
    <td class="text-center">2C</td>
    <td><input type="text" class="km-millesimi" maxlength="6"></td>
  </tr>
</tbody>
<tfoot class="custom-table-footer">
  <tr>
    <td colspan="4" class="text-right"></td>
    <td class="km_total_millesimal_table font-green-sharp">0.00</td>
  </tr>
</tfoot>
<table>