检查复选框是否被选中：未捕获的类型错误
[英]Checking if checkbox is checked: Uncaught TypeError
问题描述
I have a table with three columns: id, price and a checkbox.
我有一个包含三列的表格：id、price 和一个复选框。 I want to parse the table to JSON but only include rows with a checked checkbox.我想将表解析为 JSON，但只包含带有选中复选框的行。 However, my code throws Uncaught TypeError: Cannot read properties of undefined (reading 'type') in this line: if (ele[i].type == 'checkbox' && ele[i].checked == true) .但是，我的代码抛出Uncaught TypeError: Cannot read properties of undefined (reading 'type') in this line: if (ele[i].type == 'checkbox' && ele[i].checked == true) 。 Where am I going wrong?我哪里错了？
const btn = document.getElementById("click"); btn.addEventListener("click", function() { tableToJson(table); }) let table = document.getElementById("myTable"); function tableToJson(table) { let data = []; const ele = document.querySelectorAll(".myCheckbox"); // first row needs to be headers let headers = []; for (i = 0; i < table.rows[0].cells.length; i++) { headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, ''); } // go through cells for (i = 1; i < table.rows.length; i++) { if (ele[i].type == 'checkbox' && ele[i].checked == true) { let tableRow = table.rows[i]; let rowData = {}; for (j = 0; j < tableRow.cells.length; j++) { rowData[headers[j]] = tableRow.cells[j].innerHTML; } data.push(rowData); } } console.log(data); return data; }
<body> <button id="click">Click</button> <table id="myTable"> <thead> <tr> <th>Id</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>AAA</td> <td>12.81</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>BBB</td> <td>1.06</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>CCC</td> <td>1.89</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>DDD</td> <td>1.94</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>EEE</td> <td>3.61</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> </tbody> </table> </body>
2 个解决方案
解决方案1
0 2021-11-15 21:30:03
As you're iterating on ele.length you should use ele[i].type == 'checkbox' .当您在ele.length迭代时，您应该使用ele[i].type == 'checkbox' 。
Other than that, since you have 5 checkboxes and 6 rows, when you read tableRow you need to add a + 1 otherwise you'll select the wrong row.除此之外，由于您有5复选框和6行，当您阅读tableRow您需要添加一个+ 1否则您将选择错误的行。
In your current code, if you select the first element (index 0) you get the header row (index 0) while you should take index 1 instead.在您当前的代码中，如果您选择第一个元素（索引 0），您将获得标题行（索引 0），而您应该使用索引 1。
let tableRow = table.rows[i+1];
const btn = document.getElementById("click"); btn.addEventListener("click", function() { tableToJson(table); }) let table = document.getElementById("myTable"); function tableToJson(table) { let data = []; const ele = document.querySelectorAll(".myCheckbox"); // first row needs to be headers let headers = []; for (i = 0; i < table.rows[0].cells.length; i++) { headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, ''); } // go through cells for (i = 0; i < ele.length; i++) { if (ele[i].type == 'checkbox' && ele[i].checked == true) { let tableRow = table.rows[i+1]; let rowData = {}; for (j = 0; j < tableRow.cells.length; j++) { rowData[headers[j]] = tableRow.cells[j].innerHTML; } data.push(rowData); } } console.log(data); return data; }
<body> <button id="click">Click</button> <table id="myTable"> <thead> <tr> <th>Id</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>AAA</td> <td>12.81</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>BBB</td> <td>1.06</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>CCC</td> <td>1.89</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>DDD</td> <td>1.94</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> <tr> <td>EEE</td> <td>3.61</td> <td><input type="checkbox" class="myCheckbox" checked></td> </tr> </tbody> </table> </body>
解决方案2
0 2021-11-15 22:16:41
first I do not know where you aré importing your js.首先我不知道你在哪里导入你的js。 Second javascript Is faster than the dom so by the time you r js gets into if (ele[i].type == 'checkbox' && ele[i].checked == true) your dom Is not rendered yet.第二个 javascript 比 dom 快，所以当你的 js 进入if (ele[i].type == 'checkbox' && ele[i].checked == true)你的 dom 还没有呈现。 Thats y it breaks you need to wait for your dom to be rendered.就是这样，你需要等待你的 dom 被渲染。
document.addEventLidtener("DOMContentLoaded", e=>{
// Add your code here
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.