html 多次搜索时,选中状态不变,保存多次选中状态<tr data-index="2" data-uniqueid="00EFEBA972D8443299F2B093B5D1A290" class="selected"><td class="bs-checkbox " style="width: 36px; "><label> <input data-index="2" name="btSelectItem" type="checkbox"> <span></span> </label></td><td>王文彬</td><td></td><td>省药监局稽查八处</td><td>-</td><td>-</td><td></td><td>15246991792</td></tr>
时间: 2023-07-09 19:54:36 浏览: 57
您可以使用 JavaScript 来实现保存多次选中状态的功能,同时在多次搜索时保持选中状态不变。具体实现方法如下:
1. 创建一个空数组来保存选中行的数据,例如 `selectedRows`。
2. 当用户选中某一行时,您可以通过修改该行的 class 属性来实现选中状态的变化,同时将该行的数据保存到 `selectedRows` 数组中。
3. 当用户进行搜索时,您可以遍历保存选中行数据的 `selectedRows` 数组,并将匹配搜索条件的行的 class 属性设置为 "selected",其他行的 class 属性设置为 "",这样就可以保持选中状态不变。
4. 当用户取消选中某一行时,您可以从 `selectedRows` 数组中移除该行的数据。
5. 注意,在每次搜索时,您需要先将之前保存选中行数据的 `selectedRows` 数组清空,然后再根据搜索条件重新保存选中行的数据。
示例代码如下:
```
// 创建一个空数组来保存选中行的数据
let selectedRows = [];
// 选中某一行时的处理函数
function onSelectRow(row) {
// 修改该行的 class 属性来实现选中状态的变化
row.classList.add('selected');
// 将该行的数据保存到 selectedRows 数组中
selectedRows.push(row);
}
// 取消选中某一行时的处理函数
function onDeselectRow(row) {
// 修改该行的 class 属性来实现取消选中状态的变化
row.classList.remove('selected');
// 从 selectedRows 数组中移除该行的数据
selectedRows = selectedRows.filter(selectedRow => selectedRow !== row);
}
// 搜索时的处理函数
function onSearch(keyword) {
// 先将之前保存选中行数据的 selectedRows 数组清空
selectedRows = [];
// 遍历所有行,根据搜索条件保存选中行的数据,并修改其 class 属性
const rows = document.querySelectorAll('tr');
rows.forEach(row => {
const isMatched = row.innerText.includes(keyword);
if (isMatched) {
// 如果该行匹配搜索条件,则将其 class 属性设置为 "selected"
row.classList.add('selected');
// 并将该行的数据保存到 selectedRows 数组中
selectedRows.push(row);
} else {
// 如果该行不匹配搜索条件,则将其 class 属性设置为 ""
row.classList.remove('selected');
}
});
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)