当前位置：首页 > JavaScript

js表格实现拼接

2026-01-30 21:42:42JavaScript

使用数组的 `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 的场景，减少重绘：

js表格实现拼接

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);