代码之家 › 专栏 › 技术社区 › Shobi

如何仅使用javscript从innerHTML中选择元素

javascript

Shobi · 技术社区 · 6 年前

<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>

2 回复 | 直到 5 年前

T.J. Crowder 6 年前

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...
    }
}

旁注:

HTMLCollection 退回人 rows cells 并没有定义为可iterable,但是您通过使用 for-of . 有些浏览器即使没有指定它也可以使用,但有些浏览器没有。

如果您在页面或应用程序(不是库)中执行此操作,则可以确保 HTML集合 可以这样填充:

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
        });
    }
}

看到了吗 this answer 为你做那件事 NodeList (哪个是定义为iterable)以获取详细信息。

或者,使用 querySelectorAll 在表和行上:

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

brk 6 年前

你可以用 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"] 将返回第一个匹配的元素。

然后使用 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>