异常教程

HTML DOM tr 对象（长文讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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）是展示结构化数据的常用工具。而 HTML DOM tr 对象 作为表格的核心组成部分，直接决定了如何动态操作表格的行（Row）。无论是增删行、修改内容，还是响应用户交互，掌握 tr 对象的 DOM 操作方法都是开发者必备的技能。本文将从基础概念出发，结合代码示例和实际场景，帮助读者系统理解 HTML DOM tr 对象 的工作原理和应用技巧。

一、表格的基础结构与 tr 对象的角色

表格的 HTML 结构通常由 <table>、<tr>、<td> 等标签组成，其中：

  • <table> 定义表格整体容器；
  • <tr> 定义表格中的一行（Row）；
  • <td> 定义表格中的单元格（Cell）。

可以将表格想象为 Excel 的工作表，<tr> 就是其中的一行，而 <td> 是行中的各个单元格。

表格的 HTML 代码示例

<table>
  <tr>
    <td>苹果</td>
    <td>红色</td>
    <td>10</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>黄色</td>
    <td>5</td>
  </tr>
</table>

在这个示例中，每个 <tr> 标签包裹的 <td> 单元格共同构成表格的一行。

二、通过 DOM 操作 tr 对象的常见场景

在 JavaScript 中，通过 DOM（文档对象模型）可以动态修改表格的行。以下是开发者最常需要实现的功能：

1. 获取 tr 对象

使用 document.querySelector 或 document.querySelectorAll 可以定位到表格中的 tr 对象。

示例：获取所有行并遍历

// 获取表格元素
const table = document.querySelector("table");

// 获取所有 tr 元素
const rows = table.querySelectorAll("tr");

// 遍历所有行并输出内容
rows.forEach((row, index) => {
  console.log(`第 ${index + 1} 行的内容：`, row.textContent);
});

示例：通过索引获取特定行

// 获取第二行（索引从0开始）
const secondRow = table.rows[1];
console.log("第二行内容：", secondRow.textContent);

2. 修改 tr 的内容

通过 innerHTML 或 textContent 属性可以动态更新行的内容。

示例：修改某一行的文本

// 修改第一行的第二个单元格内容
const firstRow = table.rows[0];
firstRow.cells[1].textContent = "绿色";

3. 添加新行

使用 insertRow() 方法可以向表格中插入新行。

示例：在表格末尾添加新行

// 在表格最后一行后插入新行
const newRow = table.insertRow(-1);

// 向新行添加三个单元格
const cell1 = newRow.insertCell(0);
cell1.textContent = "葡萄";

const cell2 = newRow.insertCell(1);
cell2.textContent = "紫色";

const cell3 = newRow.insertCell(2);
cell3.textContent = "8";

4. 删除行

通过 deleteRow() 方法或直接操作 DOM 节点删除行。

示例：删除指定索引的行

// 删除第二行（索引为1）
table.deleteRow(1);

示例：通过事件触发删除行

// 为每一行添加删除按钮，并绑定点击事件
rows.forEach(row => {
  const deleteButton = document.createElement("button");
  deleteButton.textContent = "删除";
  deleteButton.onclick = () => {
    row.remove(); // 直接移除当前行
  };
  row.appendChild(deleteButton);
});

三、进阶技巧：动态表格的复杂操作

1. 根据数据动态生成表格

通过遍历数据数组，可以快速生成包含多行的表格。

示例：用 JavaScript 动态渲染表格

// 示例数据
const fruits = [
  { name: "草莓", color: "红色", count: 15 },
  { name: "橙子", color: "橙色", count: 7 }
];

// 获取表格的tbody元素（推荐使用tbody包裹行）
const tbody = document.querySelector("tbody");

// 清空原有内容
tbody.innerHTML = "";

// 遍历数据，生成行和单元格
fruits.forEach(fruit => {
  const row = tbody.insertRow();
  row.insertCell(0).textContent = fruit.name;
  row.insertCell(1).textContent = fruit.color;
  row.insertCell(2).textContent = fruit.count;
});

2. 样式动态控制

通过操作 style 属性或 classList，可以为特定行添加样式。

示例：为偶数行添加斑马纹样式

// 为表格的偶数行添加背景色
rows.forEach((row, index) => {
  if (index % 2 === 1) {
    row.style.backgroundColor = "#f0f0f0";
  }
});

3. 行的拖拽排序

通过监听 drag 和 drop 事件，可以实现行的拖拽排序功能。

示例：实现行的拖拽排序

<!-- 表格中为每行添加可拖拽属性 -->
<table>
  <tbody id="draggableTable">
    <tr draggable="true">
      <td>苹果</td>
      <td>红色</td>
    </tr>
    <tr draggable="true">
      <td>香蕉</td>
      <td>黄色</td>
    </tr>
  </tbody>
</table>

let draggedRow = null;

document.querySelectorAll("tr").forEach(row => {
  row.addEventListener("dragstart", (e) => {
    draggedRow = e.target.closest("tr");
    e.dataTransfer.effectAllowed = "move";
  });

  row.addEventListener("dragover", (e) => {
    e.preventDefault();
    return false;
  });

  row.addEventListener("drop", (e) => {
    e.preventDefault();
    if (draggedRow !== e.target.closest("tr")) {
      const targetRow = e.target.closest("tr");
      const parent = targetRow.parentNode;
      parent.removeChild(draggedRow);
      parent.insertBefore(draggedRow, targetRow);
    }
    return false;
  });
});

四、常见问题与最佳实践

1. 如何高效获取特定行？

  • 使用 querySelector 结合 CSS 选择器： 
    // 获取 class 为"highlight"的行
const highlightRow = table.querySelector("tr.highlight");
  • 通过遍历过滤： 
    const filteredRows = Array.from(rows).filter(row => row.cells[0].textContent === "苹果");

2. 避免直接操作 innerHTML 的风险

直接设置 innerHTML 会覆盖原有行的所有内容，可能导致事件监听器丢失。建议通过 textContent 或操作子节点（appendChild）来更新内容。

3. 性能优化建议

  • 避免频繁操作 DOM，尽量批量更新后再渲染；
  • 对于大数据量的表格，考虑分页或虚拟滚动技术。

五、总结

HTML DOM tr 对象 是操作表格行的核心工具，其应用场景涵盖了从简单的内容修改到复杂的动态交互。通过本文的示例和技巧，开发者可以掌握以下关键能力：

  • 精准定位和操作表格行；
  • 动态生成、删除和排序行；
  • 结合数据驱动实现复杂功能。

无论是构建用户信息列表、订单管理界面，还是数据可视化表格，掌握 tr 对象的 DOM 操作方法都能显著提升开发效率。建议读者通过实际项目实践，逐步深入理解表格与 DOM 的交互逻辑。

提示：本文示例代码均可在浏览器控制台直接运行测试。开发者可通过修改代码参数（如索引、样式属性）观察不同操作的效果，从而加深理解。

最新发布

查看更多文章