Question

我想使用getElementById（）方法来查看行。我想点击＆＃34; Header＆＃34;并显示以下行。如何正确使用getElementById（）？您可以运行代码here。

＆＃13;

function hide() {
  var table = document.getElementById("mytab1");
  for (var i = 0, cell; cell = table.cells\[i\]; i++) {
    cell.style.display = "none";
  }
}

＆＃13;

<html>

<head>
  <style>
    ...
  </style>
</head>

<body>
  <table>
    <tr>
      <th onclick="hide()"> Header </th>
    </tr>

    <tr>
      <td> 1 </td>
    </tr>

    <tr>
      <td> Quit </td>
    </tr>

  </table>

</body>

</html>

＆＃13;

Answer 1

嗯，首先，你做错了，首先，我找不到document.getElementById（“mytab1”）; mytab1 id，我的意思是mytab1要显示，你必须创建一个相应的id。现在重新创建一个你的例子，试试这个，

   <table id="mytab1">
    <tr>
    <th onclick="hide()" style="cursor:pointer;"> Header </th>
    </tr>


    <tr ><td> 1 </td></tr>

    <tr ><td><a style="cursor:pointer;"> Quit </a></td></tr>

    </table>


    <script>
 function hide() {
                var table = document.getElementById("mytab1");
                alltr = table.querySelectorAll("tr");

                for (var i = 1; i < alltr.length-1; i++) {
                    alltr[i].style.display = (alltr[i].style.display == "none") ? "" : "none";
                }
            }
    </script>

尝试并查看它是否有效，如果它没有告诉我，让我们一起解决。

Answer 2

与现有答案相比，我使用的方法略有不同。此外，这使用普通的Javascript，而不是jQuery。

首先，您可以使用CSS：

，而不是通过内联样式隐藏元素

table.bodyHidden tr:nth-child(odd),
table.bodyHidden tr:nth-child(even) {
  display: none;
}

table.bodyHidden tr:first-child {
  display: block;
}

然后，如果您有多个表，并且不希望在脚本中对表的ID进行硬编码，则可以通过<table>导航到点击处理程序中的event.target元素，然后切换上面有bodyHidden课程。

＆＃13;

function hide(event) {
  var tableNode = undefined;
  var currentNode = event.target;
  
  // Search for the table node among the parent elements of the element that triggered the click event.
  while(tableNode == undefined) {
    if(currentNode.nodeName == 'TABLE') {
      tableNode = currentNode;    
    } else {
      currentNode = currentNode.parentNode;
    }
  }
  
  // Toggle the bodyHidden class.
  if(tableNode.classList.contains("bodyHidden")) {
    tableNode.classList.remove("bodyHidden");
  } else {
    tableNode.classList.add("bodyHidden");
  }
}

＆＃13;

table.bodyHidden tr:nth-child(odd),
table.bodyHidden tr:nth-child(even) {
  display: none;
}

table.bodyHidden tr:first-child {
  display: block;
}

＆＃13;

<body>
  <table>
    <tr>
      <th onclick="hide(event)"> Header </th>
    </tr>

    <tr>
      <td> 1 </td>
    </tr>

    <tr>
      <td> Quit </td>
    </tr>

  </table>

</body>

＆＃13;

Answer 3

使用jQuery，您可以获得此输出。

＆＃13;

$(function() {
  var $rows = $('#mytab1 tbody');
  $("#mytab1 th").on("click", function() {
    // alert("Clicked");
    $rows.hide(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytab1">
  <thead>
    <th> Header </th>
  </thead>
  <tbody>
    <tr>
      <td> 1 </td>
    </tr>

    <tr>
      <td> Quit </td>
    </tr>
  </tbody>
</table>

＆＃13;

如何通过单击表头来显示和隐藏表的行？

3 个答案: