HTML表格搜索框添加X关闭按钮 点击后展示全部数据如何实现

1. 调整HTML结构 #

将原有输入框包裹在定位父容器中，同时新增清空X按钮元素：

<div class="search-wrapper">
  <input id="myInput" type="text" placeholder="Search..">
  <span id="clearBtn">×</span>
</div>

2. 补充样式代码 #

在原有<style>标签内新增以下样式，实现X按钮悬浮在输入框右侧的效果：

/* 原有样式保留，新增以下代码 */
.search-wrapper {
  position: relative;
  display: inline-block;
}
#myInput {
  padding-right: 28px;
}
#clearBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 18px;
  line-height: 1;
  display: none;
}
#clearBtn:hover {
  color: #333;
}

3. 新增交互逻辑 #

在原有jQuery代码中补充清空按钮的交互逻辑：

$(document).ready(function(){
  // 原有搜索逻辑保留，补充控制清空按钮显隐的代码
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // 输入框有内容时显示X按钮，无内容时隐藏
    $("#clearBtn").toggle(value.length > 0);
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  // 新增清空按钮点击事件
  $("#clearBtn").on("click", function() {
    // 清空输入框内容
    $("#myInput").val('');
    // 隐藏清空按钮
    $(this).hide();
    // 显示表格所有行数据
    $("#myTable tr").show();
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#clearBtn").toggle(value.length > 0);
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  $("#clearBtn").on("click", function() {
    $("#myInput").val('');
    $(this).hide();
    $("#myTable tr").show();
  });
});
</script>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.search-wrapper {
  position: relative;
  display: inline-block;
}
#myInput {
  padding-right: 28px;
}
#clearBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 18px;
  line-height: 1;
  display: none;
}
#clearBtn:hover {
  color: #333;
}
</style>
</head>
<body>

<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>  
<div class="search-wrapper">
  <input id="myInput" type="text" placeholder="Search..">
  <span id="clearBtn">×</span>
</div>
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Steph</td>
    <td>Wilson</td>
    <td>s_w@test.com</td>
  </tr>
  </tbody>
</table>  
</body>
</html>

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