HTML finding and stop displaying table child

问题

I've done this:

<table id="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>

<script type="text/javascript">
    function iterate() {
        var table = document.getElementById("tabla").children;
        for (b=0; b<table.length(); b++) {
            var cells = table[b].children;
            if(cells[0].innerHtml == "row1") {
                if(cells[1].innerHtml == "w") {
                    table[b].style.display="none";
                }
            }
        }
    }
</script>

My intention is to find all children of the table that satisfy a condition and to stop displaying them.

My code is not working, I do not know why.

Does anyone know?

回答1:

1. The children of your table element are tbody
2. There is no length() function, it's an attribute (just use length)
3. There is no innerHtml, you should use innerHTML
4. 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:

function iterate() {
  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].children
      if (cells[0].innerHTML == "row1") {
        if (cells[1].innerHTML == "w") {
          table[b].style.display="none";
        }
      }
    }
  }
}

iterate();

<table id="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>

回答2:

function iterate() {
        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;
}

<table id="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>

回答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.

来源：https://stackoverflow.com/questions/40962221/html-finding-and-stop-displaying-table-child