HTML查找并停止显示表格子项 [英] 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> 
函数iterate（）{
 var table = document.getElementById（tabla）。children; 
 for（b = 0; b  var cells = table [b] .children; 
 if（cells [0] .innerHtml ==row1）{
 if（cells [1] .innerHtml ==w）{
 table [b] .style.display = 无; 
} 
} 
} 
} 
< / script> 
  

我的意图是查找满足条件的所有表格的子项并停止显示它们。 / p>

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

有人知道吗？

解决方案

1. 表元素的子元素是 tbody


2. 没有 length（）函数，它是一个属性（只需使用 length ）


3. 没有 innerHtml ，您应该使用 innerHTML


4. 您引用的 cells [0] 实际上是行（而不是所以它是innerHTML == < th> row1< / th>< td> w< / td>




以下是对代码的修正：


function i terate（）{var table = document.getElementById（tabla）。children; for（b = 0; b

< table ID = 塔布拉 > < TBODY> < TR><的第i; ROW1< /第>< TD> W< / TD>< / TR> < TR><的第i; ROW2< /第>< TD> X< / TD>< / TR> < / tbody的> < TBODY> < TR><的第i; ROW1< /第>< TD> Y< / TD>< / TR> < TR><的第i; ROW2< /第>< TD> z，其中; / TD>< / TR> < / tbody>< / table>




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

这篇关于HTML查找并停止显示表格子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！