Html Finding And Stop Displaying Table Child

Question

I've done this: &

Solution 1:

The children of your table element are tbody
There is no length() function, it's an attribute (just use length)
There is no innerHtml, you should use innerHTML
The cells[0] you refer to is actually the row (and not the cell) so it's innerHTML == <th>row1</th><td>w</td>

Here is the fix to your code:

functioniterate() {
  var table = document.getElementById("tabla").children;
  for (b=0; b<table.length; b++) {
    var rows = table[b].children;
    for (r=0; r<rows.length;r++) {
      var cells = rows[r].childrenif (cells[0].innerHTML == "row1") {
        if (cells[1].innerHTML == "w") {
          table[b].style.display="none";
        }
      }
    }
  }
}

iterate();

<tableid="tabla"><tbody><tr><th>row1</th><td>w</td></tr><tr><th>row2</th><td>x</td></tr></tbody><tbody><tr><th>row1</th><td>y</td></tr><tr><th>row2</th><td>z</td></tr></tbody></table>

Solution 2:

functioniterate() {
        var table = document.getElementById("tabla").children;
      
        for (b=0; b<table.length; b++) {
            var cells = table[b].children;
          
            if(cells[0].children[0].innerHTML == "row1") {
                if(cells[0].children[1].innerHTML == "w") {
                    table[b].style.display="none";
                }
            }
        }
    }
iterate();

*{
background-color:pink;
}

<tableid="tabla"><tbody><tr><th>row1</th><td>w</td></tr><tr><th>row2</th><td>x</td></tr></tbody><tbody><tr><th>row1</th><td>y</td></tr><tr><th>row2</th><td>z</td></tr></tbody></table>

Solution 3:

I solved it like this:

var table = document.getElementById("tabla").children;
    for (b=0; b<table.length; b++) {
        var rows = table[b].children;
        var cells = rows[0].children;
        if (cells[0].innerHTML == "row1") {
            if (cells[1].innerHTML != "x") {
              table[b].style.display="none";
            } else {
                table[b].style.display="block";
            }
        }
    }

I don't iterate through all elements of each tbody because I am only interested in the first element.

javascript dox

Html Finding And Stop Displaying Table Child

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Html Finding And Stop Displaying Table Child"