实际上，我正在尝试使用循环中的querySelector从HTML表中读取输入字段值，但我不知道为什么它会显示错误“typeerror：Cannot read property'value'of null”。
我还尝试了以下方法：-ocells.item(j).getElementsByTagName('input')[0].value Same result:-“TypeError：无法读取null的属性'value'”
请帮我弄清楚我做错了什么，
谢谢
代码如下：
null
<!DOCTYPE html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table id="m-table">
<caption>Item Lists</caption>
<thead class="text-center">
<tr>
<th scope="col">#</th>
<th scope="col">Item Code</th>
<th scope="col">Item Description</th>
<th scope="col">Rate</th>
<th scope="col">Order Qty</th>
<th scope="col">Order Amount</th>
<th scope="col">Rate of Rec. Qty</th>
<th scope="col">Quantity Received</th>
</tr>
</thead>
<tbody id = "PO_results">
<tr class = "aach-Result">
<th class = "rowInd" scope="row">1</th>
<td class = "IC">2</td>
<td class = "ID">3</td>
<td class = "IR">4</td>
<td class = "OQ">5</td>
<td class = "OAM">6</td>
<td>
<div >
<input id = "1" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
<td>
<div >
<span id="inputGroup-sizing-sm"></span>
<input id = "2" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
</tr>
<tr class = "aach-Result">
<th class = "rowInd" scope="row">2</th>
<td class = "IC">3</td>
<td class = "ID">4</td>
<td class = "IR">5</td>
<td class = "OQ">6</td>
<td class = "OAM">7</td>
<td>
<div >
<input id = "1" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
<td>
<div >
<span id="inputGroup-sizing-sm"></span>
<input id = "2" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="LinesTableGRN" colspan="7">Total Amount</th>
<td> <input id = "TotalTableGRN" type="number" min="1" disabled></td>
</tr>
</table>
<input type="submit" value="Submit" onclick = "ProcessGETable()">
<script>
function ProcessGETable()
{
var Tdata = [];
var oTable = document.getElementById('m-table');
var rowLength = oTable.rows.length;
for (i = 1; i < rowLength; i++)
{
var row = [];
var oCells = oTable.rows.item(i).cells;
var cellLength = oCells.length;
for(var j = 1; j < cellLength-1; j++)
{
if(j < 5)
{
var cellVal = oCells.item(j).innerHTML;
row.push(cellVal);
}
else
{
var test = oCells.item(j).querySelector('input');
console.log(test.value)
}
}
Tdata.push(row)
}
console.log(Tdata)
}
</script>
</body> null
由于运行for循环时的最后一列引用了不包含input元素的“Order Amount”列，因此发生了上述错误。因此，这行ocells.item(j).queryselector('input')将为空。以获得‘的’率。QTY'将if(j<5)更改为if(j<6)。
如果你想得到这两个‘率’。Qty“和”Quantity Received“还将（var j=1；j更改为（var j=1；j。
此更改应消除您面临的错误，并将返回值。请验证..
null
<!DOCTYPE html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table id="m-table">
<caption>Item Lists</caption>
<thead class="text-center">
<tr>
<th scope="col">#</th>
<th scope="col">Item Code</th>
<th scope="col">Item Description</th>
<th scope="col">Rate</th>
<th scope="col">Order Qty</th>
<th scope="col">Order Amount</th>
<th scope="col">Rate of Rec. Qty</th>
<th scope="col">Quantity Received</th>
</tr>
</thead>
<tbody id = "PO_results">
<tr class = "aach-Result">
<th class = "rowInd" scope="row">1</th>
<td class = "IC">2</td>
<td class = "ID">3</td>
<td class = "IR">4</td>
<td class = "OQ">5</td>
<td class = "OAM">6</td>
<td>
<div >
<input id = "1" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
<td>
<div >
<span id="inputGroup-sizing-sm"></span>
<input id = "2" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
</tr>
<tr class = "aach-Result">
<th class = "rowInd" scope="row">2</th>
<td class = "IC">3</td>
<td class = "ID">4</td>
<td class = "IR">5</td>
<td class = "OQ">6</td>
<td class = "OAM">7</td>
<td>
<div >
<input id = "1" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
<td>
<div >
<span id="inputGroup-sizing-sm"></span>
<input id = "2" type="number" aria-describedby="inputGroup-sizing-sm" min="1" required>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="LinesTableGRN" colspan="7">Total Amount</th>
<td> <input id = "TotalTableGRN" type="number" min="1" disabled></td>
</tr>
</table>
<input type="submit" value="Submit" onclick = "ProcessGETable()">
<script>
function ProcessGETable()
{
var Tdata = [];
var oTable = document.getElementById('m-table');
var rowLength = oTable.rows.length;
for (i = 1; i < rowLength; i++)
{
var row = [];
var oCells = oTable.rows.item(i).cells;
var cellLength = oCells.length;
for(var j = 1; j < cellLength; j++)
{
if(j < 6)
{
var cellVal = oCells.item(j).innerHTML;
row.push(cellVal);
}
else
{
var test = oCells.item(j).querySelector('input');
console.log(test.value)
}
}
Tdata.push(row)
}
console.log(Tdata)
}
</script>
</body> 