我编写了此代码示例代码以隐藏 2 行，但它不起作用

I write this code sample code to hide 2 rows but it did not work

本文关键字：代码 不起作用 隐藏      更新时间：2023-09-26

我试图隐藏两行，<tr><td>line 1</td></tr>和<tr><td>line 2</td></tr>，将它们包装在一个带有display:none集合的div中，但这些行没有隐藏。为什么？

<script type="text/javascript">
  function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
      ele.style.display = "none";
      text.innerHTML = "Show";
    } else {
      ele.style.display = "block";
      text.innerHTML = "Hide";
    }
  } 
</script>
<table>
  <tr>
    <td>
      <a id="displayText" href="javascript:toggle();">Show</a>
    </td>
  </tr>
  <div id="toggleText" style="display: none;">
    <tr><td>line 1</td></tr>
    <tr><td>line 2</td></tr>
  </div>
</table>

你的 HTML 标记无效，你不能在表中将div 作为子元素！

当您想将div 放在表格中时，它需要位于表格单元格内，即在 td 内部。请注意，我按类名选择两个div，因为 id 应该是唯一的。

<script language="javascript"> 
 function toggle() {
    var ele = document.getElementsByClassName("toggleText");
    var text = document.getElementById("displayText");
    if(ele[0].style.display == "block") {
        ele[0].style.display = "none";
        ele[1].style.display = "none";
        text.innerHTML = "Show";
    }
    else {
        ele[0].style.display = "block";
        ele[1].style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>
<table>
    <tr><td>
    <a id="displayText" href="javascript:toggle();">Show</a>
    </td></tr>
    <tr><td><div class="toggleText">line 1</div></td></tr>
    <tr><td><div class="toggleText">line 2</div></td></tr>
</table>
相关文章：