簡體   English   中英

檢查復選框是否被選中:未捕獲的類型錯誤

[英]Checking if checkbox is checked: Uncaught TypeError

我有一個包含三列的表格:id、price 和一個復選框。 我想將表解析為 JSON,但只包含帶有選中復選框的行。 但是,我的代碼拋出Uncaught TypeError: Cannot read properties of undefined (reading 'type') in this line: if (ele[i].type == 'checkbox' && ele[i].checked == true) 我哪里錯了?

 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>

當您在ele.length迭代時,您應該使用ele[i].type == 'checkbox'

除此之外,由於您有5復選框和6行,當您閱讀tableRow您需要添加一個+ 1否則您將選擇錯誤的行。

在您當前的代碼中,如果您選擇第一個元素(索引 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>

首先我不知道你在哪里導入你的js。 第二個 javascript 比 dom 快,所以當你的 js 進入if (ele[i].type == 'checkbox' && ele[i].checked == true)你的 dom 還沒有呈現。 就是這樣,你需要等待你的 dom 被渲染。

document.addEventLidtener("DOMContentLoaded", e=>{
// Add your code here
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM