html的表格查询 简单样例
时间: 2023-08-04 12:04:07 浏览: 38
以下是一个简单的HTML表格样例：
```
<!DOCTYPE html>
<html>
<head>
<title>表格查询</title>
</head>
<body>
<h1>学生信息查询</h1>
<form>
<label for="name">姓名：</label>
<input type="text" name="name">
<input type="submit" value="查询">
</form>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
<td>85</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
<td>95</td>
</tr>
</table>
</body>
</html>
```
这个样例包含一个包含一个表单和一个表格。用户可以在表单中输入姓名并提交表单，页面会根据用户输入的姓名查询表格中对应的学生信息并显示在页面上。表格中包含了学生的姓名、年龄、性别和成绩。
相关问题
html表格检索布局代码样例
我可以帮您提供一些HTML表格检索布局代码的样例，以下是其中一个样例代码：
```
<!DOCTYPE html>
<html>
<head>
<title>Table Search Layout</title>
<style>
table {
border-collapse: collapse;
width: 100%;
font-size: 16px;
text-align: left;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even){
background-color: #f2f2f2;
}
input[type=text]{
padding: 6px;
border: none;
border-radius: 4px;
margin-right: 10px;
}
button[type=submit]{
background-color: #4CAF50;
color: white;
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.search-form{
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
</style>
</head>
<body>
<div class="search-form">
<form action="#">
<input type="text" placeholder="Search...">
<button type="submit">Submit</button>
</form>
</div>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john.doe@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>jane.doe@example.com</td>
</tr>
<tr>
<td>Bob</td>
<td>Smith</td>
<td>bob.smith@example.com</td>
</tr>
<tr>
<td>Alice</td>
<td>Johnson</td>
<td>alice.johnson@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>
```
希望这可以帮助到您。
html表格模糊查询
要在HTML表格中实现模糊查询，你需要以下几个步骤：
1. 在HTML中添加两个接收条件的输入框和一个搜索按钮。这样用户就可以输入查询条件并点击搜索按钮进行搜索。
2. 在JavaScript中，你需要在重载函数中获取输入框中的搜索条件，并将其提交到控制器进行条件的筛选。
3. 在JavaScript中，你可以使用以下代码实现模糊搜索的功能：
```javascript
window.onload = function () {
var otab = document.getElementById('dateTab'); // 要查询的表格
var obtn = document.getElementById('btnsearch'); // 查询按钮
var otext = document.getElementById('txtsearch'); // 输入框
obtn.onclick = function () {
for (var i = 0; i < otab.tBodies\[0\].rows.length; i++) {
var stab = otab.tBodies\[0\].rows\[i\].cells\[1\].innerHTML.toLowerCase();
var stext = otext.value.toLowerCase();
var arr = stext.split(' ');
otab.tBodies\[0\].rows\[i\].style.background = ""; // 确保在下一次搜索时上一次搜索不会影响这次搜索的结果
for (var j = 0; j < arr.length; j++) {
if (stab.search(arr\[j\]) != -1) {
otab.tBodies\[0\].rows\[i\].style.background = 'yellow';
}
}
}
}
}
```
这段代码会在用户点击搜索按钮时，遍历表格中的每一行，将每行的第二列内容与输入框中的搜索条件进行比较。如果搜索条件在内容中出现，则将该行的背景色设置为黄色，表示匹配成功。
请注意，这段代码假设你的表格的id为`dateTab`，搜索按钮的id为`btnsearch`，输入框的id为`txtsearch`。你需要根据实际情况进行相应的修改。
#### 引用[.reference_title]
- *1* [Layui表格重载 模糊查询](https://blog.csdn.net/weixin_55017780/article/details/126573029)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [HTML 设置通过模糊查询可以使表格某行数据显示高亮](https://blog.csdn.net/weixin_45309155/article/details/123062892)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
最新推荐
HTML页面自适应宽度的table(表格)
WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。 将所有列设置为固定...
JQuery 动态生成Table表格实例代码
JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>...
vue实现简单表格组件实例详解
vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，vue三大核心组件 路由 状态管理，路由控制页面的渲染，页面由组件组成，数据有vuex进行管理和改变。下面我会以一个简单的案例来说
HTML表格标记教程(47):表格嵌套
在页面中，排版是通过表格的嵌套来完成的。即一个表格内部可以套入另一个表格。原因如下：首先，网页的排版会很复杂，在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过总表格来实现，容易引起...
JS简单实现动态添加HTML标记的方法示例
本文实例讲述了JS简单实现动态添加HTML标记的方法。分享给大家供大家参考，具体如下： 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现。 CreateElement()方法可以根据一个指定的类型来创建一个HTML...
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
MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析
# 1. MATLAB柱状图概述**
MATLAB柱状图是一种图形化工具，用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。
柱状图的优点在于其简单易懂，能够直观地展示数据分布。在信号处理中，柱状图可以帮助工程师识别信号中的模式、趋势和异常情况，从而为信号分析和处理提供有价值的见解。
# 2. 柱状图在信号处理中的应用
柱状图在信号处理
用Spring boot和vue写一个登录注册界面
好的，这是一个比较常见的技术问题，我可以为您提供一些参考资料和思路。首先，您可以使用Spring Boot作为后端框架来处理用户认证和注册的逻辑，比如使用Spring Security实现用户登录认证。同时，您还需要设计相应的数据模型和数据库表结构来存储用户信息。在前端方面，您可以使用Vue.js作为框架来构建登录注册页面，使用Axios来发起API请求并和后端进行交互。当然，在实现过程中，还需要考虑一些具体细节，比如数据校验、安全性和用户体验等方面。希望这些信息能够帮助到您。
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。