动态修改表格数据需通过DOM API精准操作table、tr、td/th元素：按行列索引或选择器定位单元格更新内容；用insertRow/insertCell添加行；用remove/deleteRow或遍历deleteCell删除行列；大批量更新宜用DocumentFragment提升性能。
动态修改表格的行和列数据，核心是操作 <table> 元素及其子元素（<tr>、<td>、<th>），通过 JavaScript DOM API 增删改查节点。关键不在于“重绘整个表格”，而是精准定位目标单元格或行，用 textContent、innerHTML 或 appendChild() 等方法更新内容或结构。
修改某一行某一列的数据（定位到具体单元格）
先用 querySelector 或索引方式获取目标 <td> 或 <th>，再改内容：
-
按行列号修改：假设表格 ID 是
"myTable"，想改第 2 行第 3 列（索引从 0 开始 → 行索引 1，列索引 2）：document.getElementById("myTable").rows[1].cells[2].textContent = "新内容"; -
按 class 或 data 属性定位：比如给某个单元格加
class="price"，可直接：document.querySelector("#myTable .price").textContent = "$99.99"; - 用
innerHTML可插入 HTML（如带样式的文字或图标），但注意 XSS 风险，纯文本优先用textContent。
动态添加一行（插入新 <tr>）
添加行不是拼字符串，而是创建元素再挂载，保证 DOM 结构干净、事件可绑定：
- 用
insertRow()最简洁：在表格末尾加一行 →table.insertRow()；在指定位置（如第 0 行顶部）→table.insertRow(0)。 - 接着用
insertCell()给新行加单元格：
const newRow = table.insertRow();<br> const cell1 = newRow.insertCell(0);<br> const cell2 = newRow.insertCell(1);<br> cell1.textContent = "张三";<br> cell2.textContent = "85";
- 如果需复杂结构（如带按钮的单元格），可用
innerHTML或appendChild(document.createElement(...))构建。
删除某一行或某一列
删除操作要小心索引偏移，删完后后续行/列索引会自动前移：
立即学习“Java免费学习笔记（深入）”；
-
删行：直接调用
row.remove()（现代浏览器支持），或用table.deleteRow(index)。 -
删列：DOM 没有原生
deleteColumn，需遍历所有行，对每行调用deleteCell(index)：
const colIndex = 2;<br> for (let i = 0; i < table.rows.length; i++) {<br> if (table.rows[i].cells.length > colIndex) {<br> table.rows[i].deleteCell(colIndex);<br> }<br> } - 删之前建议加确认逻辑（如
if (confirm("确定删除？"))），避免误操作。
批量更新多行多列（提升性能的小技巧）
频繁操作 DOM 会触发多次重排重绘，影响性能。大批量更新时建议：
- 用
DocumentFragment先离线构建整块内容，最后一次性挂载：
const fragment = document.createDocumentFragment();<br> data.forEach(item => {<br> const row = table.insertRow();<br> row.insertCell().textContent = item.name;<br> row.insertCell().textContent = item.score;<br> fragment.appendChild(row); // 先加到 fragment<br> });<br> table.appendChild(fragment); // 一次插入 - 或者先
table.style.display = "none"隐藏表格，改完再显示，减少视觉闪烁和布局计算。
