css 如何使表格隐藏，直到内容被过滤？

ru9i0ody 于 2023-02-20 发布在其他

关注(0)|答案(2)|浏览(143)

如何隐藏下表，直到我从搜索栏搜索内容？我希望在使用搜索栏筛选该表之前不显示该表

<html>
<div class="students">
    Students

<input type="text" id="studsearch" onkeyup="StudentSearch()" placeholder="Search Student Number">
<body>
<table border ="1" cellpadding="0" id="studtable">
    <tr>
        <th>Student No.</th>    
        <th>Full Name</th>
    </tr>
    <tr id="stud1">
        <td>1</td>
        <td>John</td>
    </tr>
    <tr id="stud2">
        <td>2</td>
        <td>Mike</td>
    </tr>
</table>
</body>
</div>
<script>
function StudentSearch() {
  
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("studsearch");
  filter = input.value.toUpperCase();
  table = document.getElementById("studtable");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
        foundHit = true;
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>
</html>

我希望在搜索之前将表隐藏起来

css

来源：https://stackoverflow.com/questions/75492424/how-to-make-table-hidden-until-content-is-filtered

2条答案

按热度按时间

ekqde3dh1#

添加css样式以隐藏表

table {
  display: none;
}

假设有过滤按钮/搜索按钮

<input type="text" id="filter-input">
<button id="filter-button">Filter</button>

向筛选按钮添加事件侦听器，单击该按钮时将显示表并筛选其内容，

//Filtering
const filterButton = document.getElementById("filter-button");
filterButton.addEventListener("click", function() {
  // Get the filter criteria from the input field
  const filter = document.getElementById("filter-input").value;
  
  // Filter the table rows based on the criteria
  const tableRows = document.getElementsByTagName("tr");
  for (let i = 0; i < tableRows.length; i++) {
    const row = tableRows[i];
    const cells = row.getElementsByTagName("td");
    let shouldShowRow = false;
    for (let j = 0; j < cells.length; j++) {
      const cell = cells[j];
      if (cell.textContent.includes(filter)) {
        shouldShowRow = true;
        break;
      }
    }
    if (shouldShowRow) {
      row.style.display = "";
    } else {
      row.style.display = "none";
    }
  }
  
  // Show the table
  const table = document.getElementsByTagName("table")[0];
  table.style.display = "";
});

赞(0）回复(0）举报 2023-02-20

q9rjltbz2#

要在初始时隐藏表格并仅在有搜索结果时显示它，您可以向table元素添加CSS样式，将其初始显示设置为"none"。然后，修改JavaScript代码，使其仅在至少有一个搜索结果时显示表格。
你可以试试这个：

<html>
<head>
  <style>
    #studtable {
      display: none;
    }
  </style>
</head>
<body>
  <div class="students">
    Students
    <input type="text" id="studsearch" onkeyup="StudentSearch()" placeholder="Search Student Number">
  </div>
  <table border="1" cellpadding="0" id="studtable">
    <tr>
      <th>Student No.</th>
      <th>Full Name</th>
    </tr>
    <tr id="stud1">
      <td>1</td>
      <td>John</td>
    </tr>
    <tr id="stud2">
      <td>2</td>
      <td>Mike</td>
    </tr>
  </table>
  <script>
    function StudentSearch() {
      var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("studsearch");
      filter = input.value.toUpperCase();
      table = document.getElementById("studtable");
      tr = table.getElementsByTagName("tr");
      var foundHit = false;

      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
            foundHit = true;
          } else {
            tr[i].style.display = "none";
          }
        }
      }

      if (foundHit) {
        table.style.display = "";
      } else {
        table.style.display = "none";
      }
    }
  </script>
</body>
</html>

使用这段代码，当页面第一次加载时，表将被隐藏。只有当至少有一个搜索结果时，表才会显示。

赞(0）回复(0）举报 2023-02-20

我来回答

css 如何使表格隐藏，直到内容被过滤？

2条答案

相关问题

热门标签

最新问答