Javascript读取表和if值！=null获取行数据

Question

如果行中[X]单元格的值为，我如何使用Javascript读取表并查找表中的每一行！=null，保存该行数据。

目前，我刚刚发现如何使用这个脚本读取整个表格

<div class="container-fluid">
<div class="card shadow mb-4">
<div class="card-header py-3">

<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value=""></td>
</tr>
</tbody>
</table>

<script>
var myTab = document.getElementById('tableID');
var tableData = [];
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (i = 1; i < myTab.rows.length; i++) {
if(){
}else{
}
}
</script>

我能得到帮助来完成脚本的语法吗？或者我能得到一些关于如何解决这个的指导吗

在本表示例中，输出或应抓取的行将是前2个tr，因为它们是！=空

Answer 1

首先，属性id在文档中必须是唯一的，请改用class。

您可以使用querySelectorAll()使用属性选择器将值不为null的输入作为目标。然后按如下方式使用map()：

var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = Array.from(myTab).map(input => input.value);
console.log(tableData);

<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>

UPDATE：您可以通过以下方式获得对象形式的所有单元格值：

var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Array.from(myTab).forEach(input => {
var tds = input.closest('tr').children;
var obj = {};
obj.A = tds[0].textContent;
obj.B = tds[1].textContent;
obj.C = tds[2].textContent;
obj.D = tds[3].textContent;
obj.E = input.value;
tableData.push(obj);
});
console.log(tableData);

<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td class="myID"><input type="hidden" name="txtID" class="txtID" value=""></td>
</tr>
</tbody>
</table>

Answer 2

使用cells获取行的单元格，然后在cells[4]中获取输入的值。如果不是空字符串，请将其保存到数组中。

var myTab = document.getElementById('tableID');
var tableData = [];
// LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
for (var i = 1; i < myTab.rows.length; i++) {
var val = myTab.rows[i].cells[4].firstElementChild.value;
if (val != '') {
tableData.push(val);
}
}
console.log(tableData);

<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="100"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value="200"></td>
</tr>
<tr>
<td>val1</td>
<td>val2</td>
<td>val3</td>
<td>1500</td>
<td id="myID"><input type="hidden" name="txtID" id="txtID" value=""></td>
</tr>
</tbody>
</table>