首页写一个前端表格，把这个查询结果显示出来

写一个前端表格，把这个查询结果显示出来

时间: 2024-03-21 21:39:54 浏览: 50

好的，我可以帮您写一个简单的前端表格，并将查询结果显示出来。以下是一个基本的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` 替换为您实际的查询结果。

阅读全文