如何实现仅在完成手机号筛选后显示HTML表格？

核心思路 #

默认隐藏表格，仅在用户完成筛选操作后，根据是否匹配到目标数据决定表格的显示状态：匹配到结果则展示表格（仅显示匹配行），未匹配到则保持隐藏（也可添加无匹配提示）。

修改步骤及代码 #

1. 添加CSS设置初始隐藏
   给表格设置初始隐藏状态，确保用户未操作前看不到任何数据：

#myTable {
  display: none;
}

2. 调整HTML结构：改用按钮触发筛选
   按照你需求里的「点击按钮筛选」逻辑，替换原来的onkeyup触发方式：

<input type="text" id="myInput" placeholder="输入手机号查询">
<button onclick="myFunction()">查询</button>

<table id="myTable">
  <tr class="header">
    <th>Phone</th>
    <th>Name</th>
    <th>DOB</th>
  </tr>
  <tr>
    <td>1239832</td>
    <td>Rhythm</td>
    <td>Class 10</td>
  </tr>
  <tr>
    <td>2198320</td>
    <td>Rekha</td>
    <td>Class 11</td>
  </tr>
  <tr>
    <td>21397293</td>
    <td>Arun</td>
    <td>Class 11</td>
  </tr>
</table>

3. 修改JS逻辑：控制表格显示/隐藏
   在原有筛选逻辑基础上，增加匹配结果判断，以此控制表格的显示状态：

function myFunction() {
  var input, filter, table, tr, td, i, txtValue, hasMatch = false;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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 = "";
        hasMatch = true; // 标记存在匹配行
      } else {
        tr[i].style.display = "none";
      }
    } else {
      // 表头行始终显示（不需要的话可删除此分支）
      tr[i].style.display = "";
    }
  }

  // 根据匹配结果控制表格显示
  if (hasMatch && filter.trim() !== "") {
    table.style.display = "table";
  } else {
    table.style.display = "none";
    // 可选：添加无匹配提示
    // alert("未找到对应手机号的数据");
  }
}

额外说明 #

• 若希望表头在未筛选时也隐藏，直接删除代码中处理表头的else分支即可。
• 如果仍想保留onkeyup实时筛选，只需把按钮的onclick改回输入框的onkeyup，核心逻辑无需变动。

内容的提问来源于stack exchange，提问作者Rhythm Agarwal