异常教程

HTML DOM td / th 对象（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：表格数据的“幕后管家”角色

在网页开发中，表格（Table）是展示结构化数据的核心工具。无论是展示学生成绩、商品价格还是订单信息，我们都离不开 <table> 元素。而 <td>（表格数据单元）和 <th>（表格标题单元）作为表格的最小组成单元，就像是Excel表格中的一个个“格子”，承载着具体的数据内容。

然而，静态表格的局限性显而易见——当需要动态修改数据、响应用户交互或根据条件高亮特定单元格时，仅靠HTML标签是不够的。此时，HTML DOM td/th 对象就成为开发者手中的“瑞士军刀”，它允许我们通过JavaScript直接操作表格的每个单元格，实现复杂的数据交互逻辑。

本文将从基础概念到实战案例，系统讲解如何通过DOM操作精准控制表格数据，帮助开发者高效完成从“静态展示”到“动态交互”的跨越。

一、表格结构与DOM对象的关联

1.1 表格的基本结构

一个典型的表格包含以下元素：

<table>
  <tr> <!-- 表格行 -->
    <th>标题1</th> <!-- 表格标题 -->
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td> <!-- 普通数据单元 -->
    <td>数据2</td>
  </tr>
</table>
  • <table>：定义表格容器
  • <tr>：定义表格行（Row）
  • <th>：定义表格标题单元（通常加粗并居中显示）
  • <td>：定义普通数据单元

1.2 DOM对象的“树状关系”

当浏览器解析HTML后，每个表格元素都会生成对应的DOM对象。这些对象通过层级关系构成“树状结构”：

table → tr → th/td

通过JavaScript，我们可以像“爬树”一样逐级访问这些对象。例如：

// 获取表格根节点
const table = document.querySelector("table");

// 获取所有行
const rows = table.rows; // 返回HTMLCollection对象

// 获取第一行的第二个单元格
const firstRowSecondCell = rows[0].cells[1]; // 返回TH或TD对象

形象比喻：这就像在图书馆中，先找到目标书架（table），再找到书架上的某一排书（tr），最后取出其中的一本书（td/th）。

二、核心操作方法与属性解析

2.1 基础属性：访问单元格内容

2.1.1 innerHTML：内容的读取与修改

// 读取单元格内容
const cellText = cell.innerHTML;

// 修改单元格内容
cell.innerHTML = "<strong>新内容</strong>";

注意事项：使用innerHTML会直接操作HTML内容，若需仅获取纯文本，可改用textContent属性。

2.1.2 cellIndex：定位单元格的“座位号”

每个单元格都有一个cellIndex属性，表示其在当前行中的位置索引（从0开始计数）。

const columnIndex = cell.cellIndex; // 获取列索引

2.2 行与列的遍历技巧

2.2.1 遍历所有行

// 遍历表格所有行
for(let i = 0; i < table.rows.length; i++) {
  const row = table.rows[i];
  // 处理每一行
}

2.2.2 遍历某一行的单元格

// 遍历某一行的所有单元格
const cells = row.cells;
for(let j = 0; j < cells.length; j++) {
  const cell = cells[j];
  // 处理每个单元格
}

案例场景：假设需要统计表格中某一列的数值总和，可通过遍历该列的所有td单元格实现。

三、进阶操作：动态交互与样式控制

3.1 动态修改单元格样式

通过style属性可直接操作CSS样式：

// 高亮单元格
cell.style.backgroundColor = "#FFD700"; // 设置背景色
cell.style.color = "red"; // 设置文字颜色

实战案例：当用户点击某个单元格时，动态改变其背景色：

document.querySelectorAll("td").forEach(cell => {
  cell.addEventListener("click", function() {
    this.style.backgroundColor = this.style.backgroundColor === "yellow" ? "white" : "yellow";
  });
});

3.2 响应式数据更新

3.2.1 根据条件筛选数据

// 隐藏价格超过100元的行
const rows = document.querySelectorAll("tr");
rows.forEach(row => {
  const priceCell = row.cells[2]; // 假设价格在第三列
  if(Number(priceCell.textContent) > 100) {
    row.style.display = "none";
  }
});

3.2.2 动态插入新行与单元格

// 创建新行
const newRow = table.insertRow(-1); // 在末尾插入

// 添加新单元格
const newCell = newRow.insertCell(0);
newCell.innerHTML = "新数据";

四、常见问题与解决方案

4.1 如何区分th和td对象？

通过检查元素的tagName属性：

if(cell.tagName === "TH") {
  console.log("这是标题单元格");
} else if(cell.tagName === "TD") {
  console.log("这是数据单元格");
}

4.2 如何避免DOM操作中的“越界访问”？

当遍历表格时，需确保行和列索引在有效范围内：

if(i < table.rows.length && j < row.cells.length) {
  // 安全操作单元格
}

4.3 性能优化技巧

频繁操作DOM会降低页面性能，建议：

  1. 使用documentFragment暂存节点
  2. 批量操作后一次性更新DOM
const fragment = document.createDocumentFragment();
// 在fragment中添加多个节点
table.appendChild(fragment); // 一次性提交

五、综合案例：动态成绩表格

5.1 功能需求

  • 输入学生成绩后动态生成表格
  • 高亮及格与不及格成绩
  • 点击行跳转到详细页面

5.2 完整代码实现

<!-- HTML结构 -->
<input type="text" id="score" placeholder="输入分数（逗号分隔）">
<button onclick="generateTable()">生成表格</button>
<table id="scoreTable"></table>

<script>
function generateTable() {
  const scores = document.getElementById("score").value.split(",");
  const table = document.getElementById("scoreTable");
  table.innerHTML = ""; // 清空原有内容

  // 创建标题行
  const headerRow = table.insertRow();
  ["学号", "姓名", "成绩"].forEach((title, index) => {
    const th = headerRow.insertCell(index);
    th.textContent = title;
    th.style.fontWeight = "bold";
  });

  // 创建数据行
  scores.forEach((scoreStr, rowIndex) => {
    const score = Number(scoreStr);
    const row = table.insertRow();

    // 填充示例数据
    row.insertCell(0).textContent = `S${rowIndex + 1}`;
    row.insertCell(1).textContent = `学生${rowIndex + 1}`;
    const scoreCell = row.insertCell(2);
    scoreCell.textContent = score;

    // 动态样式
    if(score >= 60) {
      scoreCell.style.color = "green";
    } else {
      scoreCell.style.color = "red";
    }

    // 行点击事件
    row.addEventListener("click", () => {
      alert(`点击查看学生${rowIndex + 1}的详细信息`);
    });
  });
}
</script>

结论：从基础到精通的进阶路径

掌握HTML DOM td/th 对象的操作，本质上是理解“如何通过代码与HTML元素对话”。本文通过循序渐进的讲解，帮助开发者：

  1. 掌握表格DOM对象的层级关系与基础属性
  2. 学会通过JavaScript实现动态数据更新与样式控制
  3. 通过综合案例巩固知识，解决实际开发需求

未来的学习方向可包括：

  • 结合前端框架（如React/Vue）实现表格的组件化管理
  • 使用CSS Grid/Flexbox优化表格布局
  • 通过API动态获取并渲染数据

表格作为数据展示的核心载体，其DOM操作能力是每个开发者必须掌握的“基础武器”。通过不断实践与场景应用，你将能更灵活地驾驭HTML DOM，创造出功能丰富、交互流畅的网页应用。

最新发布

查看更多文章