首页
前端开发
Javascript
JavaScript动态生成表格

JavaScript动态生成表格

0 次浏览 0 条评论
rar
rar

JavaScript 动态加表格的方式，算是前端开发里挺常用的一个小技巧，尤其是你要根据用户操作或者后端数据，临时改下页面内容的时候。核心思路其实就几个步骤：创建元素、填内容、插进 DOM。熟练之后，想加几行都不是事儿。

用document.createElement()搞出table、tr、td，配合appendChild()一层层插进去，是最基本的套路。你还可以配点setAttribute()或者直接改innerText来填数据，挺直观的。

如果你数据多，比如从接口拿到一坨数组，就直接用for或者.forEach()来批量建行，性能上记得用下document.createDocumentFragment()，减少 DOM 操作次数，页面不卡顿。

再高级点嘛，可以用 ES6 的map()、模板字符串啥的，让代码更简洁。比如：

const data = Array.from({ length: 5 }, (_, i) =>
  Array.from({ length: 3 }, (_, j) => `数据${i * 3 + j}`)
);


const table = document.createElement('table');
const tbody = document.createElement('tbody');


data.forEach(rowData => {
  const row = document.createElement('tr');
  rowData.forEach(cellText => {
    const cell = document.createElement('td');
    cell.innerText = cellText;
    row.appendChild(cell);
  });
  tbody.appendChild(row);
});


table.appendChild(tbody);
document.body.appendChild(table);

，别忘了加点交互，比如给表格里的按钮绑定click事件，用户操作才有反馈。还有，如果你习惯 jQuery，也可以看看这个基于 jQuery 的表格操作，挺方便的。

如果你刚接触表格相关的 DOM 操作，推荐顺手翻翻这几个：

如果你经常动态加载数据表，真心建议把这个流程摸熟。写起来不难，用起来舒服。

rar 文件大小：12.9KB