js表格实现拼接
使用数组的 join() 方法拼接表格数据
将表格数据存储在数组中，通过 join() 方法拼接为字符串。例如拼接为 CSV 格式：
const data = [["Name", "Age"], ["Alice", 25], ["Bob", 30]];
const csv = data.map(row => row.join(",")).join("\n");
console.log(csv);
// 输出:
// Name,Age
// Alice,25
// Bob,30使用模板字符串动态拼接 HTML 表格
通过模板字符串生成 HTML 表格结构，动态插入数据：
const rows = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 }
];
let html = `<table border="1"><tr><th>Name</th><th>Age</th></tr>`;
rows.forEach(row => {
html += `<tr><td>${row.name}</td><td>${row.age}</td></tr>`;
});
html += `</table>`;
document.body.innerHTML = html;使用 reduce() 方法拼接复杂表格
适用于需要条件判断或动态处理的场景：
const data = [
{ id: 1, value: "A" },
{ id: 2, value: "B" }
];
const tableHTML = data.reduce((acc, item) => {
return acc + `<tr><td>${item.id}</td><td>${item.value}</td></tr>`;
}, `<table><tr><th>ID</th><th>Value</th></tr>`);
console.log(tableHTML + `</table>`);使用 DocumentFragment 高效拼接 DOM 表格
适用于需要频繁操作 DOM 的场景，减少重绘：
const fragment = document.createDocumentFragment();
const table = document.createElement("table");
const data = [["Header"], ["Cell"]];
data.forEach(rowData => {
const row = document.createElement("tr");
rowData.forEach(cellData => {
const cell = document.createElement("td");
cell.textContent = cellData;
row.appendChild(cell);
});
table.appendChild(row);
});
fragment.appendChild(table);
document.body.appendChild(fragment);注意事项
- 特殊字符处理：拼接 CSV 时需处理包含逗号或换行符的数据，可用双引号包裹：
const safeValue = value.includes(",") ? `"${value}"` : value; - 性能优化：大数据量时建议分批次拼接或使用虚拟滚动技术。
