HTML 找到并停止显示 table child

HTML finding and stop displaying table child

我已经这样做了:

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

我的目的是找到table中所有满足条件的children并停止显示它们。

我的代码不工作,我不知道为什么。

有人知道吗?

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>

  1. 您的 table 元素的子元素是 tbody
  2. 没有length()函数,它是一个属性(只用length
  3. 没有innerHtml,你应该用innerHTML
  4. 你指的cells[0]实际上是行(而不是单元格)所以它是 innerHTML == <th>row1</th><td>w</td>

这是对您的代码的修复:

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>

我是这样解决的:

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

我不会遍历每个 tbody 的所有元素,因为我只对第一个元素感兴趣。