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

Answer 2

我会像往常一样使用vanilla Javascript。给你：

var TableData = new Array();
foo.addEventListener('change', (e) => {
// only react if the change came from a checkbox
if (e.target.matches('input.pippo')) {
TableData = [...foo.querySelectorAll('.kmg_admin_millesimal_buildings_table tr input[type=checkbox]:not(:checked)')]
.map(input => {
let res = [...input.closest('tr').cells].map(cell => (cell.textContent || cell.children[0].value));
return { codice: res[1], piano: res[2], interno: res[3], millesimi: res[4] };
})
console.clear();
console.log(JSON.stringify(TableData));
}
})

<table class="kmg_admin_millesimal_buildings_table" id="foo">
<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>