编写一个HTML具有表头排序递增或者递减筛选控件功能的表格
时间: 2024-03-22 17:42:46 浏览: 16
好的，以下是一个简单的例子，可以实现表头排序和筛选控件功能的表格：
```html
<!DOCTYPE html>
<html>
<head>
<title>Sortable and Filterable Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=text] {
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 10px;
margin-bottom: 16px;
}
</style>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Age</th>
<th onclick="sortTable(2)">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Mary</td>
<td>31</td>
<td>UK</td>
</tr>
<tr>
<td>Bob</td>
<td>18</td>
<td>Canada</td>
</tr>
<tr>
<td>Alice</td>
<td>22</td>
<td>Australia</td>
</tr>
<tr>
<td>David</td>
<td>28</td>
<td>France</td>
</tr>
</tbody>
</table>
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("td")[n];
y = rows[i + 1].getElementsByTagName("td")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
```
该例子包含一个带有“Search for names..”提示文本的文本框，并且使用`onkeyup`事件监听输入框的输入，然后调用`myFunction()`函数进行筛选。
当用户单击表头时，会触发`sortTable()`函数进行排序，可以根据所选列的内容按升序或降序排列。
请注意，该例子只是一个基本的示例，您可以根据您的需求进行修改和扩展。
相关推荐
最新推荐
Element实现表格嵌套、多个表格共用一个表头的方法
渲染出一个这样子的 表格 ： res 数据： res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板）， res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第...
Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例
主要介绍了Qt GUI图形图像开发之QT表格控件QTableView,QTableWidget复杂表头(多行表头) 及冻结、固定特定的行的详细方法与实例,需要的朋友可以参考下
解决layui表格的表头不滚动的问题
今天小编就为大家分享一篇解决layui表格的表头不滚动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue多种方法实现表头和首列固定的示例代码
先创建一个活动表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> th, td { min-width: 200px; height: 50px...
BootStrap table表格插件自适应固定表头(超好用)
主要介绍了BootStrap table表格插件自适应固定表头(超好用)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
解释minorization-maximization (MM) algorithm，并给出matlab代码编写的例子
Minorization-maximization (MM) algorithm是一种常用的优化算法，用于求解非凸问题或含有约束的优化问题。该算法的基本思想是通过构造一个凸下界函数来逼近原问题，然后通过求解凸下界函数的最优解来逼近原问题的最优解。具体步骤如下：
1. 初始化参数 $\theta_0$，设 $k=0$；
2. 构造一个凸下界函数 $Q(\theta|\theta_k)$，使其满足 $Q(\theta_k|\theta_k)=f(\theta_k)$；
3. 求解 $Q(\theta|\theta_k)$ 的最优值 $\theta_{k+1}=\arg\min_\theta Q(
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。