向HTML表格添加jQuery筛选器可以通过以下步骤完成:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
示例代码:
$(document).ready(function() {
// 通过输入框筛选表格数据
$('#filterInput').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#myTable tbody tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<input id="filterInput" type="text" placeholder="输入关键词筛选">
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</tbody>
</table>
这样,当用户在输入框中输入关键词时,表格会根据关键词动态筛选显示匹配的行。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云