如何利用 JavaScript 操作表格元素内容
作者：袖梨
2026-07-16
JavaScript操作表格需通过DOM API选取table、tr、td等元素，利用querySelector或rows/cells索引获取内容，用textContent或innerHTML修改，通过insertRow/deleteRow等方法动态增删行，支持遍历处理与条件高亮。
JavaScript 操作表格内容主要通过 DOM API 获取 <table>、<tr>、<td> 等元素，再读取或修改其文本、HTML 或属性。核心在于准确选取目标单元格，并理解表格的层级结构（table > tbody > tr > td/th）。
获取指定单元格内容
常用方式是用 querySelector 或遍历 rows 和 cells 集合：
- 通过 CSS 选择器直接定位：
document.querySelector('table tr:nth-child(2) td:nth-child(3)').textContent - 用行索引和列索引访问：
table.rows[1].cells[2].textContent（注意：索引从 0 开始，第 2 行第 3 列对应rows[1]和cells[2]） - 若表格含
<thead>或<tbody>，建议明确指定：table.tBodies[0].rows[0].cells[0].innerHTML
修改单元格内容
修改文本用 textContent，保留 HTML 结构用 innerHTML：
-
cell.textContent = '新文字'—— 安全，防 XSS，纯文本 -
cell.innerHTML = '<strong>加粗内容</strong>'—— 支持标签，但需确保内容可信 - 也可设置表头单元格：
table.rows[0].cells[1].textContent = '更新后的列名'
动态添加或删除行/单元格
借助 insertRow()、deleteRow()、insertCell() 等原生方法：
立即学习“Java免费学习笔记（深入）”；
- 在末尾加一行：
table.insertRow().insertCell().textContent = '新数据' - 在指定位置插入（如第 2 行）：
table.insertRow(1).insertCell().textContent = '插在前面' - 删除第 3 行：
table.deleteRow(2) - 清空某行所有单元格：
row.innerHTML = ''或循环调用deleteCell()
遍历表格并批量处理
适合统计、高亮、校验等场景，注意跳过表头或忽略空单元格：
- 遍历所有数据行：
for (let row of table.tBodies[0].rows) { for (let cell of row.cells) { /* 处理 cell */ } } - 只处理数值列：
if (!isNaN(cell.textContent.trim())) { sum += Number(cell.textContent) } - 高亮含关键词的单元格：
if (cell.textContent.includes('警告')) cell.style.backgroundColor = '#ffeb3b'
