二维数组是模拟表格结构最直接的方式，行和列天然对应外层和内层索引，适合处理行列分明、数据量不大的简易表格；支持读取、修改、插入、删除等基本操作，并可结合html table动态渲染，但缺乏合并单元格、类型校验、高性能优化等高级功能。
二维数组是模拟表格结构最直接的方式，行和列天然对应数组的外层和内层索引，适合处理行列分明、数据量不大的简易表格场景。
用二维数组表示表格结构
把每一行看作一个一维数组，所有行组合成一个外层数组。例如 3 行 4 列的表格可初始化为：
let table = [ ["姓名", "年龄", "城市", "职业"], ["张三", 28, "北京", "工程师"], ["李四", 32, "上海", "设计师"] ];
这样 table[0][1] 就是第一行第二列（即“年龄”），table[2][3] 是第三行第四列（即“设计师”）。
支持基本表格操作
基于二维数组可以快速实现常用功能：
-
读取单元格：直接通过
table[row][col]访问，注意检查索引是否越界 -
修改单元格：如
table[1][0] = "王五"，将第二行第一列改为“王五” -
插入新行：用
table.push([...])添加一行；在中间插入可用splice(rowIndex, 0, newRow) -
删除某行：用
table.splice(rowIndex, 1)；清空整表可赋值table = []
渲染到页面的简单方式
配合 HTML 的 <table> 标签，用 JS 动态生成：
<font color="#666">
<pre class="brush:php;toolbar:false;">
function renderTable(data) {
const tbody = document.querySelector("#myTable tbody");
tbody.innerHTML = "";
data.forEach(row => {
const tr = document.createElement("tr");
row.forEach(cell => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);
});
tbody.appendChild(tr);
});
}
renderTable(table);
</pre>
</font>
<p>注意：若含标题行，可单独用 <code><thead> 渲染第一行，其余用 <code><tbody>。
<h3>注意事项与局限性</h3>
<p>这种实现轻量灵活，但也有边界：</p>
<ul>
<li>不自动处理合并单元格、冻结行列等高级功能</li>
<li>未做类型校验，数字或布尔值会转为字符串显示，需按需转换</li>
<li>大量数据时频繁重绘影响性能，建议配合虚拟滚动或分页</li>
<li>如需排序、筛选，需自行编写逻辑（例如用 <code>sort() 配合列索引）
适合后台配置项列表、问卷结果预览、教学演示等对交互要求不高的场景。
