`, `| `, 和 ` | `标签来构建表格结构，并通过JavaScript动态地添加这些元素到DOM中。以下是一个简单的示例，展示了如何使用JavaScript来创建一个包含表头和数据行的自定义表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义表格示例</title>
</head>
<body>
<div id="tableContainer"></div>
<script>
// 表格数据
const headers = ['ID', '姓名', '年龄', '职业'];
const rows = [
[1, '张三', 28, '软件工程师'],
[2, '李四', 24, '数据分析师'],
[3, '王五', 32, '产品经理']
];
// 创建表格的函数
function createTable(headers, rows) {
// 创建表格元素
const table = document.createElement('table');
// 创建表头
const thead = table.createTHead();
const headerRow = thead.insertRow();
// 添加表头列
headers.forEach(headerText => {
const th = document.createElement('th');
th.textContent = headerText;
headerRow.appendChild(th);
});
// 创建表体
const tbody = table.createTBody();
// 添加数据行
rows.forEach(rowData => {
const row = tbody.insertRow();
rowData.forEach(cellData => {
const td = document.createElement('td');
td.textContent = cellData;
row.appendChild(td);
});
});
// 将表格添加到页面中
document.getElementById('tableContainer').appendChild(table);
}
// 调用函数创建表格
createTable(headers, rows);
</script>
</body>
</html>
这段代码首先定义了表头（`headers`）和数据行（`rows`）的数组。然后，`createTable`函数负责创建表格的DOM结构，包括表头、表体以及数据行的填充。最后，这个表格被添加到页面的`#tableContainer`元素中。这是一个非常基础的自定义表格创建示例，你可以根据具体需求进行扩展和修改。
|