做个类似于excel 可筛选的静态html表格
时间: 2023-05-29 14:02:18 浏览: 307
以下是一个简单的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()`函数将被调用，以逐个检查每一行是否包含输入框内的文本。如果匹配，则行将显示出来，否则将隐藏。注意，第一行被排除在检查范围之外，因为它代表表的表头。
相关推荐
最新推荐
Java实现excel表格转成json的方法
3. `getExcel2JSONHelper` 是一个静态方法，用于获取`Excel2JSONHelper` 的实例，遵循单例模式。 4. `fileNameFileter` 方法检查文件是否为Excel文件（.xls 或 .xlsx 扩展名），如果满足条件则返回true，否则返回...
JS实现table表格数据排序功能(可支持动态数据+分页效果)
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用...
浅析C#静态类,静态构造函数,静态变量
值得注意的是，静态构造函数的执行时间早于任何实例构造函数，而且静态构造函数的执行顺序取决于静态成员的引用顺序，而不是代码中定义的顺序。 静态变量，又称为类变量，它们是属于类的，而非类的实例。这意味着...
H3C_静态路由基础配置案例
H3C_静态路由基础配置案例，原创文档。 适用于H3CV7版本的网络设备，包括交换机、路由器等。 搭建环境为HCL3.0.1，适用于刚入门的网络工程师学习参考。
浅析C#中静态方法和非静态方法的区别
C#语言中，静态方法和非静态方法是两个不同的概念，它们之间的区别不仅仅是概念上的，还有许多实际的差异。本文将通过对C#静态方法和非静态方法的分析，向大家介绍它们之间的具体区别。 一、静态方法和非静态方法的...
基于联盟链的农药溯源系统论文.doc
随着信息技术的飞速发展，电子商务已成为现代社会的重要组成部分，尤其在移动互联网普及的背景下，消费者的购物习惯发生了显著变化。为了提供更高效、透明和安全的农产品交易体验，本论文探讨了一种基于联盟链的农药溯源系统的设计与实现。
论文标题《基于联盟链的农药溯源系统》聚焦于利用区块链技术，特别是联盟链，来构建一个针对农产品销售的可信赖平台。联盟链的优势在于它允许特定参与方（如生产商、零售商和监管机构）在一个共同维护的网络中协作，确保信息的完整性和数据安全性，同时避免了集中式数据库可能面临的隐私泄露问题。
系统开发采用Java语言作为主要编程语言，这是因为Java以其稳定、跨平台的特性，适用于构建大型、复杂的企业级应用。Spring Boot框架在此过程中起到了关键作用，它提供了快速开发、模块化和轻量级的特点，极大地简化了项目的搭建和维护。
数据库选择MySQL，因其广泛应用于企业级应用且性能良好，能够支持大规模的数据处理和查询。系统设计分为前台和后台两大部分。前台界面面向普通用户，提供一系列功能，如用户注册和登录、查看农产品信息、查看公告、添加商品到购物车以及结算和管理订单。这些功能旨在提升用户体验，使消费者能够便捷地获取农产品信息并完成购买。
后台则主要服务于管理员，包括用户管理、农产品分类管理、基础信息管理（如农药信息）、订单管理和公告管理等。这些功能确保了信息的准确记录和管理，同时也支持对系统的有效运维。
关键词"农产品"、"农药"、"溯源"、"SpringBoot框架"和"MySQL"强调了论文的核心研究内容，即通过联盟链技术强化农产品的全程追溯能力，确保食品安全，提高消费者信任度，同时展示了所用的技术栈和平台选择。
这篇论文不仅探讨了在当前电商环境下如何利用区块链技术改进农药溯源系统，还深入剖析了其实现过程和关键组件，为农产品供应链的透明化和信息化提供了一个实用的解决方案。这样的系统在保障消费者权益、推动绿色农业发展等方面具有重要意义。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
Python代码雨与可维护性：保持代码清晰易维护，避免代码雨困扰
# 1. Python代码雨的概念
### 1.1 代码雨的定义和危害
代码雨是指在Python代码中出现大量重复、冗余和难以维护的代码片段。它会对代码的可读性、可维护性和可扩展性产生严重影响。
### 1.2 导致代码雨的常见原因
* **缺乏模块化和封装：**代码没有被合理地组织成模块和类，导致代码分散且难以管理。
* **命名不规范和注释不足：**变量、函数和类的命名不一致或不直
编写代码，实现seq2seq结构中的编码器和解码器。
编写代码实现seq2seq结构中的编码器和解码器，需要先了解seq2seq模型的基本原理。seq2seq模型包含编码器和解码器两个部分，其中编码器将输入序列映射为固定长度的向量表示，而解码器则使用该向量表示来生成输出序列。以下是实现seq2seq结构中的编码器和解码器的基本步骤：
1. 编写编码器的代码：编码器通常由多个循环神经网络（RNN）层组成，可以使用LSTM或GRU等。输入序列经过每个RNN层后，最后一个RNN层的输出作为整个输入序列的向量表示。编码器的代码需要实现RNN层的前向传播和反向传播。
2. 编写解码器的代码：解码器通常也由多个RNN层组成，与编码器不同的是，解码器在每个
基于Python的猫狗宠物展示系统.doc
随着科技的进步和人们生活质量的提升，宠物已经成为现代生活中的重要组成部分，尤其在中国，宠物市场的需求日益增长。基于这一背景，"基于Python的猫狗宠物展示系统"应运而生，旨在提供一个全方位、便捷的在线平台，以满足宠物主人在寻找宠物服务、预订住宿和旅行时的需求。
该系统的核心开发技术是Python，这门强大的脚本语言以其简洁、高效和易读的特性被广泛应用于Web开发。Python的选择使得系统具有高度可维护性和灵活性，能够快速响应和处理大量数据，从而实现对宠物信息的高效管理和操作。
系统设计采用了模块化的架构，包括用户和管理员两个主要角色。用户端功能丰富多样，包括用户注册与登录、宠物百科、宠物信息查询（如品种、健康状况等）、宠物医疗咨询、食品推荐以及公告通知等。这些功能旨在为普通宠物主人提供一站式的宠物生活服务，让他们在享受养宠乐趣的同时，能够方便快捷地获取所需信息和服务。
后台管理模块则更为专业和严谨，涵盖了系统首页、个人中心、用户管理、宠物信息管理（包括新品种添加和更新）、宠物申领流程、医疗预约、食品采购和管理系统维护等多个方面。这些功能使得管理员能够更好地组织和监管平台内容，确保信息的准确性和实时性。
数据库方面，系统选择了MySQL，作为轻量级但功能强大的关系型数据库，它能有效存储和管理大量的宠物信息数据，支持高效的数据查询和处理，对于复杂的数据分析和报表生成提供了可靠的基础。
这个基于Python的猫狗宠物展示系统不仅解决了宠物主人在出行和日常照顾宠物时的信息查找难题，还提升了宠物行业的数字化管理水平。它的实施将推动宠物服务行业向着更智能化、个性化方向发展，极大地提高了宠物主人的生活质量，也为企业和个人提供了新的商业机会。关键词“宠物”、“管理”、“MySQL”和“Python”恰当地概括了该系统的主题和核心技术，突显了其在现代宠物行业中的重要地位。