html 搜索后 行的选中状态不变 生成代码
时间: 2023-12-30 08:02:03 浏览: 50
以下是一个简单的示例代码,演示了如何在 HTML 表单中进行搜索后行的选中状态不变。您可以根据自己的需求进行修改和优化。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索表格</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
window.onload = function() {
// 获取表格元素
var table = document.getElementById('data-table');
// 获取搜索框元素
var searchBox = document.getElementById('search-box');
// 获取隐藏的 input 元素,用于保存搜索关键字
var keywordInput = document.getElementById('keyword-input');
// 遍历表格中的每一行元素,保存原始状态
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].setAttribute('data-original', table.rows[i].innerHTML);
}
// 监听搜索框的输入事件
searchBox.addEventListener('input', function() {
// 获取用户输入的关键字
var keyword = this.value.toLowerCase().trim();
// 将关键字保存到隐藏的 input 中
keywordInput.value = keyword;
// 遍历表格中的每一行元素,判断是否包含关键字
for (var i = 1; i < table.rows.length; i++) {
var row = table.rows[i];
var originalHTML = row.getAttribute('data-original');
var html = originalHTML.toLowerCase();
if (html.indexOf(keyword) !== -1) {
// 如果包含关键字,将该行的选中状态设置为原始状态
row.innerHTML = originalHTML;
} else {
// 如果不包含关键字,将该行的选中状态设置为未选中状态
row.innerHTML = '<td colspan="3">未找到匹配的结果</td>';
}
}
});
}
</script>
</head>
<body>
<input type="text" id="search-box" placeholder="请输入搜索关键字">
<input type="hidden" id="keyword-input">
<table id="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
```
在这个示例代码中,我们使用了一个隐藏的 input 元素来保存用户输入的关键字,遍历了表格中的每一行元素,保存了每一行的原始状态,监听了搜索框的输入事件,判断每一行是否包含用户输入的关键字,并将选中状态设置为相应的状态。
注意:这只是一个简单的示例代码,实际应用中可能需要根据具体需求进行修改和优化。