jq实现html表格内容筛选
时间: 2023-07-11 10:44:29 浏览: 78
可以使用jq的筛选器来实现html表格内容筛选。以下是一个示例代码:
```html
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Canada</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>UK</td>
</tr>
</tbody>
</table>
```
如果想要筛选出年龄小于等于30岁的人员信息,可以使用以下代码:
```javascript
$("table tbody tr").filter(function() {
return $(this).find("td:nth-child(2)").text() <= 30;
}).addClass("highlight");
```
这段代码会将年龄小于等于30岁的人员信息高亮显示。你可以根据自己的需求修改筛选条件和高亮方式。
相关问题
jq 搜索框搜索筛选表格内容
你可以使用 jQuery 的 `keyup` 事件和 `:contains` 选择器来实现搜索框搜索筛选表格内容。
以下是一个示例代码:
```html
<input type="text" id="search" placeholder="输入关键字搜索">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Canada</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>UK</td>
</tr>
</tbody>
</table>
```
以下是相应的 JavaScript 代码:
```javascript
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
```
这段代码会在搜索框输入文字时触发 `keyup` 事件,获取搜索框的值并将其转换为小写字母。然后使用 `filter` 方法来筛选表格中包含搜索框值的行,并使用 `toggle` 方法来显示或隐藏这些行。
你可以根据自己的需求修改相关代码,如搜索框的 ID、表格的选择器以及搜索的内容和方式等。
jq表格反选功能代码实实现
表格反选功能是指当用户点击“反选”按钮时,会将表格中未选中的行变为选中状态,已选中的行变为未选中状态。下面是一个使用 jQuery 实现表格反选功能的示例代码:
HTML代码:
```html
<table id="myTable">
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="select"></td>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td><input type="checkbox" name="select"></td>
<td>Jane</td>
<td>25</td>
<td>Canada</td>
</tr>
<tr>
<td><input type="checkbox" name="select"></td>
<td>Tom</td>
<td>40</td>
<td>UK</td>
</tr>
</tbody>
</table>
<button id="invert">Invert Selection</button>
```
JavaScript代码:
```javascript
$(function() {
// 全选/全不选
$("#checkAll").click(function() {
$("input[name='select']").prop("checked", $(this).prop("checked"));
});
// 反选
$("#invert").click(function() {
$("input[name='select']").each(function() {
$(this).prop("checked", !$(this).prop("checked"));
});
});
});
```
这段代码先给全选复选框 `#checkAll` 绑定了一个点击事件,当点击全选复选框时,会将所有的行复选框的选中状态与全选复选框的选中状态同步。然后给“反选”按钮 `#invert` 绑定了一个点击事件,当点击“反选”按钮时,会遍历所有的行复选框,将它们的选中状态取反。这样就实现了表格反选功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)