做个类似于excel 可筛选的静态html表格
时间: 2023-05-29 15:02:18 浏览: 297
以下是一个简单的HTML表格,具有类似于Excel的筛选功能。
```html
<!DOCTYPE html>
<html>
<head>
<title>Excel-like table</title>
<style>
table {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
th {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
background-color: #f2f2f2;
}
td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type="text"] {
padding: 6px 10px;
border: 1px solid #ccc;
}
.filter {
margin: 10px 0;
text-align: right;
}
.filter label {
display: inline-block;
margin-right: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="filter">
<label for="name-filter">Name:</label>
<input type="text" id="name-filter">
<label for="age-filter">Age:</label>
<input type="text" id="age-filter">
</div>
<table id="data">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>45</td>
<td>Male</td>
</tr>
<tr>
<td>Sally</td>
<td>33</td>
<td>Female</td>
</tr>
</tbody>
</table>
<script>
var nameFilter = document.getElementById("name-filter");
var ageFilter = document.getElementById("age-filter");
var dataTable = document.getElementById("data");
nameFilter.addEventListener("keyup", filterTable);
ageFilter.addEventListener("keyup", filterTable);
function filterTable() {
var nameInput = nameFilter.value.toUpperCase();
var ageInput = ageFilter.value.toUpperCase();
var rows = dataTable.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
var name = rows[i].getElementsByTagName("td")[0].textContent.toUpperCase();
var age = rows[i].getElementsByTagName("td")[1].textContent.toUpperCase();
if (name.indexOf(nameInput) > -1 && age.indexOf(ageInput) > -1) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
</script>
</body>
</html>
```
这个表格有一个包含两个输入框的过滤器,用于筛选表格中所需的行。每次输入框被键入时,`filterTable()`函数将被调用,以逐个检查每一行是否包含输入框内的文本。如果匹配,则行将显示出来,否则将隐藏。注意,第一行被排除在检查范围之外,因为它代表表的表头。