html制作查询界面,查询按钮下面显示表格
时间: 2024-01-02 22:05:01 浏览: 30
好的,下面是一个简单的HTML查询界面的示例代码,点击查询按钮后会在下面显示一个表格:
```html
<!DOCTYPE html>
<html>
<head>
<title>查询界面</title>
</head>
<body>
<h1>查询界面</h1>
<form onsubmit="return showTable();" id="query-form">
<label for="query">请输入查询关键字:</label>
<input type="text" id="query" name="query"><br><br>
<label for="category">请选择查询分类:</label>
<select id="category" name="category">
<option value="all">所有分类</option>
<option value="category1">分类1</option>
<option value="category2">分类2</option>
<option value="category3">分类3</option>
</select><br><br>
<button type="submit">查询</button>
</form>
<div id="results-table"></div>
<script>
function showTable() {
var query = document.getElementById("query").value;
var category = document.getElementById("category").value;
// 模拟查询结果
var results = [
{ name: "结果1", category: "分类1", description: "这是结果1的描述" },
{ name: "结果2", category: "分类2", description: "这是结果2的描述" },
{ name: "结果3", category: "分类3", description: "这是结果3的描述" },
];
// 构造表格
var table = "<table><tr><th>名称</th><th>分类</th><th>描述</th></tr>";
for (var i = 0; i < results.length; i++) {
var result = results[i];
if (category == "all" || result.category == category) {
table += "<tr><td>" + result.name + "</td><td>" + result.category + "</td><td>" + result.description + "</td></tr>";
}
}
table += "</table>";
// 显示表格
document.getElementById("results-table").innerHTML = table;
// 阻止表单提交
return false;
}
</script>
</body>
</html>
```
这个查询界面和上面的示例类似,但是增加了一个div元素用于显示查询结果表格。当用户点击提交按钮时,调用了一个名为“showTable()”的JavaScript函数,该函数获取查询关键字和查询分类,模拟查询结果,构造表格,并将表格插入到div元素中显示出来。最后,该函数返回false,阻止表单提交。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)