用HTML 5编写一个网页表格可实现输入和筛选
时间: 2024-03-23 12:40:17 浏览: 12
好的,我可以为您介绍一下如何使用 HTML 5 创建一个可输入和筛选的网页表格。
首先,我们需要使用 HTML 5 中的 `<table>` 元素来创建表格。例如,以下代码创建了一个具有四个列和三个行的表格:
```html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
<td>广州</td>
</tr>
</tbody>
</table>
```
接下来,我们需要添加一些输入和筛选功能。为此,我们可以使用 HTML 5 中的 `<input>` 元素和 JavaScript。
首先,我们可以添加一个输入框来搜索表格中的内容。例如,以下代码创建了一个文本输入框和一个“搜索”按钮:
```html
<input type="text" id="searchInput" placeholder="搜索...">
<button onclick="searchTable()">搜索</button>
```
接下来,我们可以编写一个名为 `searchTable()` 的 JavaScript 函数,该函数在点击“搜索”按钮时将搜索输入框中的文本与表格中的内容进行比较并隐藏不匹配的行。以下是 `searchTable()` 函数的代码:
```javascript
function searchTable() {
var input = document.getElementById("searchInput");
var filter = input.value.toUpperCase();
var table = document.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
var shouldHideRow = true;
for (var j = 0; j < cells.length; j++) {
var cellText = cells[j].textContent || cells[j].innerText || "";
if (cellText.toUpperCase().indexOf(filter) > -1) {
shouldHideRow = false;
break;
}
}
rows[i].style.display = shouldHideRow ? "none" : "";
}
}
```
最后,我们需要将此函数与输入框和按钮相关联。例如,我们可以将以下代码添加到 `<button>` 元素中:
```html
<button onclick="searchTable()">搜索</button>
```
现在,当您在输入框中输入文本并点击“搜索”按钮时,表格将根据搜索条件进行筛选。
以上便是使用 HTML 5 创建可输入和筛选的网页表格的基本步骤。当然,您可以根据需要对表格进行进一步自定义和扩展。