HTML發現並停止顯示錶子

Question

我已經做到了這一點：

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

我的目的是要找到滿足條件並停止顯示的表格中的所有兒童。

我的代碼不工作，我不知道爲什麼。

有誰知道嗎？

Answer 1

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>

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

Answer 3

我解決它像這樣：

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的所有元素，因爲我只對第一個元素感興趣。