从表格字段中获取复选框

Question

下午好，下面是其中的代码，我正在从表中获取字段。 0 字段包含一个复选框，我怎样才能知道它是否被选中（真或假）？您需要更改此行：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循环要好得多。

下次请添加完整代码 (HTML/JavaScript)，以便人们可以帮助您。

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

假设我们有这张表

<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 轻松完成。

1. 通过 ID 获取表格。

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

1. 获取表格行

我使用 Array.from() 将 HTMLCollection 转换为普通数组，因此我可以使用 Array API（如 .forEach）。

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

1. 循环进入表格行，并获取每一行的单元格。

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

4. 获取第一个单元格的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