表格元素-tr标签-表格行的添加-前端-HTML5-书闪BookChips

62 - 表格元素 - tr标签 - 表格行的添加

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:02:45

表格元素 - tr 标签 - 表格行的添加

在 HTML5 中，表格是一种非常常用的元素，用于展示结构化的数据。而 <tr> 标签则是表格中至关重要的一部分，它代表表格的行。本文将详细介绍 <tr> 标签的使用方法，包括如何添加表格行，以及一些相关的注意事项。

1. `<tr>` 标签概述

<tr> 是 HTML 中用于定义表格行（Table Row）的标签。一个表格可以包含多个 <tr> 标签，每个 <tr> 标签代表表格中的一行。在 <tr> 标签内部，通常会使用 <td>（表格单元格）或 <th>（表格表头单元格）标签来定义该行中的具体单元格。

2. 基本用法

下面是一个简单的 HTML 表格示例，展示了 <tr> 标签的基本用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Table Example</title>
</head>
<body>
    <table border="1">
        <!-- 表格头部行 -->
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <!-- 第一行数据 -->
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <!-- 第二行数据 -->
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

在上述代码中：

首先，我们使用 <table> 标签创建了一个表格。
然后，使用第一个 <tr> 标签定义了表格的头部行，其中 <th> 标签用于定义表头单元格，表头单元格通常会以加粗字体显示。
接下来的两个 <tr> 标签分别定义了表格中的两行数据，每行包含三个 <td> 标签，用于定义具体的数据单元格。

3. 动态添加表格行

在实际应用中，我们可能需要动态地向表格中添加行。这可以通过 JavaScript 来实现。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table Row Addition</title>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </table>
    <button onclick="addRow()">添加行</button>
    <script>
        function addRow() {
            // 获取表格元素
            var table = document.getElementById("myTable");
            // 创建一个新的 tr 元素
            var newRow = table.insertRow();
            // 在新行中插入第一个单元格
            var cell1 = newRow.insertCell(0);
            // 在新行中插入第二个单元格
            var cell2 = newRow.insertCell(1);
            // 设置第一个单元格的内容
            cell1.innerHTML = "王五";
            // 设置第二个单元格的内容
            cell2.innerHTML = "35";
        }
    </script>
</body>
</html>