从 table 字段获取复选框

Question

下午好，下面是我从 table 获取字段的代码。 0 字段包含一个复选框，我如何知道它是否被选中（true 或 false）？您需要更改此行：console.log (td.item (f));

var table = document.getElementsByClassName("table-sm");
for (var i = 0; i < table.length; i++) {
  var tr = table.item(i).getElementsByTagName("tr");
  for (var j = 0; j < tr.length; j++) {
    var trr = tr.item(j);
    var td = tr.item(j).getElementsByTagName("td");

    for (var f = 0; f < td.length; f++) {
      if (f === 0) console.log(td.item(f));
      console.log(td.item(f).innerText);
    }
  }
}

Answer 1

首先，请了解 JavaScript Table API 比仅仅制作复杂的 for 循环要好得多。

Next time please add full code (HTML/JavaScript) so people can help you.

现在让我们修复您的代码。

假设我们有这个 table

<table class="table-sm" id="myTable">
   <thead>
      <tr>
         <th>Checkbox</th>
         <th>ID</th>
         <th>Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><input type="checkbox" name="selected[]" checked /></td>
         <td>1</td>
         <td>Mohammed</td>
      </tr>
      <tr>
         <td><input type="checkbox" name="selected[]" /></td>
         <td>2</td>
         <td>Ali</td>
      </tr>
   </tbody>
</table>

并且我们想要获取每行的第一项，并检查复选框是否被选中。

我们可以使用 JS Table API 轻松完成。

通过 ID 获取 table。

var table = document.getElementById("myTable");

获取 table 行

I use Array.from() to convert HTMLCollection to normal array, so I can use Array APIs (Like .forEach).

var rows = Array.from(table.rows);

循环进入 table 行，并获取每行的单元格。

rows.map((row) => {
  var cells = Array.from(row.cells);
  
  // TODO add logic here.
});

获取第一个单元格的firstChild。

rows.map((row) => {
  var cells = Array.from(row.cells);

  if (Array.isArray(cells) && cells.length > 0) {
    var firstChild = cells[0].firstChild;

    console.log(firstChild.checked);
  }
});

Live Example

从 table 字段获取复选框

Getting a checkbox from a table field

html

javascript

checkbox

假设我们有这个 table

我们可以使用 JS Table API 轻松完成。