<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 表格 */
/* 表格外观设置 */
table {
width: 100%;
/* 表格宽度 */
border-collapse: collapse;
/* 合并单元格边框 */
margin: 0;
/* 表格外边距 */
padding: 0;
/* 表格内边距 */
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* 轻微的阴影 */
}
/* 表头样式 */
thead {
background-color: #aaaaff;
/* 背景颜色 */
color: white;
/* 字体颜色 */
}
/* 表头单元格样式 */
thead th {
font-weight: bold;
/* 字体加粗 */
padding: 15px;
/* 填充 */
text-align: left;
/* 左对齐文本 */
}
/* 表格内容样式 */
tbody td {
padding: 15px;
/* 填充 */
text-align: left;
/* 左对齐文本 */
border-bottom: 1px solid #ddd;
/* 底部边框 */
}
/* 鼠标悬停效果 */
tbody tr:hover {
background-color: #f5f5f5;
/* 悬停背景颜色 */
}
/* 条纹效果 */
tbody tr:nth-child(even) {
background-color: #f9f9f9;
/* 条纹颜色 */
}
</style>
</head>
<body>
<span style="">
<button style=";height: 20px;font-size: 12px;cursor:pointer;" onclick="resetSearch()">重置</button>
<input id="searchTxt" placeholder="搜素" style="height: 15px;font-size: 10px;width: 150px;"
oninput="searchStr()"> [<span style="font-weight: bold;" id="dsize"></span>]
</span>
<table id="table1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>Developer</td>
<td>1100</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>Designer</td>
<td>$1500</td>
</tr>
</tbody>
</table>
</body>
<script>
// 获取表格元素
var table = document.getElementById("table1");
// 获取所有行
var rows = table.rows;
document.getElementById("dsize").innerHTML = rows.length - 1
function resetSearch() {
document.getElementById('searchTxt').value = ''
search('')
}
function searchStr() {
let str = document.getElementById('searchTxt').value
search(str)
}
function search(str) {
console.log()
// 获取表格元素
var table = document.getElementById("table1");
// 获取所有行
var rows = table.rows;
// 遍历所有行
let total = 0;
for (var i = 1; i < rows.length; i++) {
var row = rows[i];
// 假设我们关注每行的第一个单元格的文本内容是否等于'目标文本'
// 第三个单元格 var cellContent = row.cells[2].innerHTML;
var cellContent = row.innerHTML;
if (cellContent.indexOf(str) !== -1) {
row.style.display = "";
total++
} else {
row.style.display = "none";
}
}
document.getElementById("dsize").innerHTML = total
}
</script>
</html>
07-19
304
08-11
359