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

Answer 1

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")) {
 // ...
 }
}

• Shobi: Thank you again for the nice suggestion, I will use it

Answer 2

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>

• Shobi: I could give this a try also. Thank you