js写一个表格
以下是使用 JavaScript 创建一个简单表格的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 表格</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: 0 auto;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div id="table-container"></div>
<script>
function createTable(data) {
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
let headerRow = document.createElement('tr');
Object.keys(data[0]).forEach(key => {
let th = document.createElement('th');
th.textContent = key;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
data.forEach(item => {
let row = document.createElement('tr');
Object.values(item).forEach(value => {
let td = document.createElement('td');
td.textContent = value;
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
return table;
}
let data = [
{ name: '张三', age: 25, gender: '男' },
{ name: '李四', age: 30, gender: '女' },
{ name: '王五', age: 28, gender: '男' }
];
let tableContainer = document.getElementById('table-container');
tableContainer.appendChild(createTable(data));
</script>
</body>
</html>基础概念：上述代码主要涉及 HTML 中的表格元素（<table>、<thead>、<tbody>、<tr>、<th>、<td>），以及 JavaScript 的 DOM 操作。
优势：
- 动态生成：可以根据数据动态创建表格，灵活性高。
- 可定制性强：可以通过修改样式和结构来满足不同的需求。
类型：这是一个基于数据的简单表格。
应用场景：
- 展示数据列表，如用户信息、商品列表等。
- 数据录入和编辑界面。
常见问题及解决方法：
- 表格样式错乱：确保 CSS 样式正确设置，特别是边框和间距。
- 数据渲染不正确：检查数据格式是否正确，以及遍历数据生成表格元素的逻辑是否有误。
希望这个示例对你有帮助，如有其他需求，请继续提问。
相关·内容
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号