How to select an element from the innerHTML using javascript only

Question

I have the following HTML table, I need to iterate through the rows and its columns.

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

I dont use Jquery

T.J. Crowder · Accepted Answer · 2019-04-20T18:19:31.790

You don't want innerHTML for this, you just want to access the HTMLInputElement within that cell.

You can do it like this, but it's fragile:

cell.firstChild.checked

I'd probably use querySelector to find the first input within the cell:

cell.querySelector("input").checked

Similarly, I probably wouldn't use cellIndex === 0, so I could change the layout without breaking my code. So for instance:

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

Side note:

Beware, the HTMLCollection returned by rows and cells is not defined as being iterable, but you're relying on it being iterable by using for-of. Some browsers make it iterable even though it isn't specified, but others don't.

If you're doing this in a page or application (not a library), you can ensure that HTMLCollection is iterable by polyfilling it like this:

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

See this answer doing that for NodeList (which is defined as iterable) for details.

Alternately, use querySelectorAll on the table and rows instead:

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

Thank you again for the nice suggestion, I will use it – Shobi Apr 20 '19 at 18:09 — Shobi, Apr 20 '19 at 18:09

brk · Answer 2 · 2019-04-20T18:18:38.963

You can use querySelectorAll and querySelector

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

This snippet is getting all the tr and converting to array so that array methods can be used

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

forEach is an array method and during each iteration item will tr and from it get the first input[type="checkbox"].querySelector will return the first matched element.

Then use checked to validate the state of the input

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>

I could give this a try also. Thank you – Shobi Apr 20 '19 at 18:17 — Shobi, Apr 20 '19 at 18:17

How to select an element from the innerHTML using javascript only

2 Answers2