首页javascript制作一张10行10列表格并从数据库中读取值

javascript制作一张10行10列表格并从数据库中读取值

时间: 2024-09-18 09:03:18 浏览: 65

在JavaScript中，我们可以结合HTML、CSS以及Ajax技术来创建动态表格。首先，我们需要HTML结构来定义表格的基本框架： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; } </style> </head> <body> <table id="dynamicTable"></table>  <script src="script.js"></script> </body> </html> ``` 然后在`script.js`文件中，我们将编写JavaScript代码来处理AJAX请求，从数据库获取数据，并填充到表格中： ```javascript // 假设我们有一个fetchData函数用于从API获取数据 function fetchData() { fetch('your-api-url') .then(response => response.json()) .then(data => { // 数据假设是一个二维数组，每行有10个元素 const rows = data.map(row => row.slice(0, 10)); // 取出前10个元素 // 创建表格 const table = document.getElementById('dynamicTable'); for (let i = 0; i < rows.length; i++) { const tr = document.createElement('tr'); rows[i].forEach(cell => { const td = document.createElement('td'); td.textContent = cell; tr.appendChild(td); }); table.appendChild(tr); } }) .catch(error => console.error('Error:', error)); } // 调用函数获取并显示数据 fetchData(); ``` 在这个例子中，你需要将`your-api-url`替换为实际的数据库API地址，该API应该返回一个适合填充表格的数据。这个脚本会在页面加载完成后异步获取数据，并实时更新表格内容。

阅读全文