写一个前端表格,把这个查询结果显示出来
时间: 2024-03-21 12:39:54 浏览: 15
好的,我可以帮您写一个简单的前端表格,并将查询结果显示出来。以下是一个基本的HTML和JavaScript代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>查询结果表格</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>
<h1>查询结果</h1>
<table id="resultTable">
<thead>
<tr>
<th>列1标题</th>
<th>列2标题</th>
<th>列3标题</th>
</tr>
</thead>
<tbody>
<!-- 这里将动态生成表格内容 -->
</tbody>
</table>
<script>
// 这里是一个模拟的查询结果数组,您需要将其替换为实际的查询结果
var queryResult = [
{ col1: "第一行列1值", col2: "第一行列2值", col3: "第一行列3值" },
{ col1: "第二行列1值", col2: "第二行列2值", col3: "第二行列3值" },
{ col1: "第三行列1值", col2: "第三行列2值", col3: "第三行列3值" }
];
// 通过 JavaScript 动态生成表格内容
var tbody = document.querySelector("#resultTable tbody");
queryResult.forEach(function(rowData) {
var row = document.createElement("tr");
Object.keys(rowData).forEach(function(key) {
var cell = document.createElement("td");
cell.textContent = rowData[key];
row.appendChild(cell);
});
tbody.appendChild(row);
});
</script>
</body>
</html>
```
请注意,这只是一个基本示例,您需要根据您的实际需求进行修改和定制化。同时,您需要将查询结果数组 `queryResult` 替换为您实际的查询结果。