javascript - 在 HTML 表格中,当用户单击搜索字段上的关闭按钮时,如何显示列中的所有值?
问题描述
我有一个搜索/过滤输入字段,我可以在其中搜索表中的名称。
问题:我想知道如何在搜索字段上添加关闭“x”按钮,以便用户在单击“X”按钮时可以看到表中的所有值:
这是代码:https ://jsfiddle.net/ekzm0pno/
<!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();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</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;
}
</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>
<input id="myInput" type="text" placeholder="Search..">
<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>
解决方案
您可以尝试在输入上绝对定位一个图标并添加一个单击事件侦听器,该侦听器找到最近的输入同级,将其值设置为''
并触发keyup
事件。
$('.del').click(function(){
$(this).siblings('input').val('').trigger('keyup');
})
.del {
position: absolute;
background-color: rgb(0, 0, 0, 0.5);
border-radius: 50%;
width: 20px;
text-align: center;
color: white;
height: 20px;
cursor: pointer;
left: 151px;
transform: scale(0.8);
}
<!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();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</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;
}
</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 style="position:relative;">
<input id="myInput" type="text" placeholder="Search..">
<span class="del">x</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>
推荐阅读
- json - 更新结构中的特定值
- sql - Oracle SQL - 选择 3 个日期中最早的日期,但忽略 NULL
- javascript - HTML 和 CSS 时间轴,顶部和底部带有相对定位的标签
- sql - 如何将 .sql 文件加载到 Scala?
- excel - 创建大量命令按钮并更有效地编写
- c# - 什么可能导致 List.Add 在单个线程中出现“目标数组不够长”?
- r - 从 R 中 geojson 的末尾删除括号 []
- php - 为什么 G-Drive 不返回我的文件列表?
- twitter-bootstrap - 遍历 Bootstrap/Reactstrap 中的数组后,结束按钮组中的空按钮
- javascript - 从嵌套在对象中的函数访问类属性