如何仅使用 javascript 从 innerHTML 中选择一个元素

Question

我有以下HTML表，我需要遍历行及其列。

<table id="hosts" border="1">
<tbody>
   <tr>
      <td><input type="checkbox" checked=""></td>
      <td>127.0.0.1</td>
      <td>localhost</td>
   </tr>
   <tr>
      <td><input type="checkbox"></td>
      <td>255.255.255.255</td>
      <td>broadcasthost</td>
   </tr>
</tbody>
</table>

<script>
    let table = document.getElementById("hosts");
    for (let row of table.rows) {
      for (let cell of row.cells) {
        if (cell.cellIndex === 0) {
          // I need to to know if the input inside the cell is checked or not
          // I can get the cell.InnerHTML, but how do I check if the checkbox is checked or not?
        }
    } 
</script>

我不使用 Jquery

Answer 1

您不希望

为此innerHTML，您只想访问该单元格中的HTMLInputElement。

你可以这样做，但它很脆弱：

cell.firstChild.checked

我可能会使用 querySelector 来查找单元格中的第一个input：

cell.querySelector("input").checked

同样，我可能不会使用 cellIndex === 0 ，所以我可以在不破坏代码的情况下更改布局。例如：

let table = document.getElementById("hosts");
for (let row of table.rows) {
  for (let cell of row.cells) {
    const checkbox = cell.querySelector("input[type=checkbox]");
    if (checkbox && checkbox.checked) {
      // ...this cell has a checked checkbox in it...
    }
}

---

旁注：

请注意，rows 和 cells 返回的HTMLCollection未定义为可迭代的，但您依赖于它通过使用 for-of 进行迭代。某些浏览器即使未指定，也会使其可迭代，但其他浏览器则没有。

如果在页面或应用程序(而不是库(中执行此操作，则可以通过像这样填充来确保HTMLCollection可迭代：

if (typeof HTMLCollection !== "undefined" && HTMLCollection.prototype && !HTMLCollection.prototype.forEach) {
    // Yes, there's really no need for `Object.defineProperty` here
    HTMLCollection.prototype.forEach = Array.prototype.forEach;
    if (typeof Symbol !== "undefined" && Symbol.iterator && !HTMLCollection.prototype[Symbol.iterator]) {
        Object.defineProperty(HTMLCollection.prototype, Symbol.iterator, {
            value: Array.prototype[Symbol.itereator],
            writable: true,
            configurable: true
        });
    }
}

有关详细信息，请参阅此答案，了解NodeList(定义为可迭代(。

或者，改用表和行上的querySelectorAll：

for (let row of table.querySelectorAll("tr")) {
  for (let cell of row.querySelectorAll("td")) {
    // ...
  }
}

Answer 2

您可以使用

querySelectorAll和querySelector

[...document.getElementById("hosts")querySelectorAll('tr')]

此代码段获取所有tr并转换为array以便可以使用数组方法

forEach(function(item) {
  let getInput = item.querySelector('input[type="checkbox"]')

forEach是一个数组方法，在每次迭代期间，item都会tr并从中获得第一个input[type="checkbox"]。querySelector将返回第一个匹配的元素。

然后使用 checked 验证输入的状态

let table = [...document.getElementById("hosts")
  .querySelectorAll('tr')
].forEach(function(item) {
  let getInput = item.querySelector('input[type="checkbox"]');
  if (getInput.checked) {
    console.log('checked')
  } else {
    console.log('not checked')
  }
})

<table id="hosts" border="1">
  <tbody>
    <tr>
      <td><input type="checkbox" checked=""></td>
      <td>127.0.0.1</td>
      <td>localhost</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>255.255.255.255</td>
      <td>broadcasthost</td>
    </tr>
  </tbody>
</table>