正文

轻松学会：原生JS快速添加表格TD元素教程及实战案例

/0 浏览量
0505

在网页开发中，表格是一个常见的元素，用于展示数据。而原生JavaScript（JS）为我们提供了强大的功能，可以帮助我们轻松地在表格中添加TD元素。本文将详细介绍如何使用原生JS添加表格TD元素，并通过一个实战案例来展示其应用。

基础知识

在开始之前，我们需要了解一些基础知识：

  • 表格结构：一个表格由<table>标签创建，行由<tr>标签创建，单元格由<td>标签创建。
  • JavaScript选择器：可以使用document.getElementById()、document.querySelector()等方法来选择DOM元素。

添加TD元素的方法

以下是在表格中添加TD元素的三种常见方法：

1. 在表格的最后一行添加

// 获取表格元素
var table = document.getElementById("myTable");

// 创建新的行和单元格
var newRow = document.createElement("tr");
var newCell = document.createElement("td");

// 设置单元格内容
newCell.textContent = "新单元格内容";

// 将单元格添加到行中，再将行添加到表格中
newRow.appendChild(newCell);
table.appendChild(newRow);

2. 在指定行的指定位置添加

// 获取表格元素
var table = document.getElementById("myTable");

// 获取指定行
var targetRow = table.rows[1]; // 获取第二行

// 创建新的单元格
var newCell = document.createElement("td");

// 设置单元格内容
newCell.textContent = "新单元格内容";

// 将单元格添加到指定行中
targetRow.appendChild(newCell);

3. 在表格的第一行添加多个单元格

// 获取表格元素
var table = document.getElementById("myTable");

// 创建新的行
var newRow = document.createElement("tr");

// 循环创建多个单元格，并设置内容
for (var i = 0; i < 3; i++) {
  var newCell = document.createElement("td");
  newCell.textContent = "新单元格内容" + (i + 1);
  newRow.appendChild(newCell);
}

// 将行添加到表格中
table.appendChild(newRow);

实战案例

以下是一个简单的实战案例，演示如何使用原生JS在表格中添加TD元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加表格TD元素实战案例</title>
</head>
<body>
<table id="myTable" border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

<button onclick="addCell()">添加单元格</button>

<script>
function addCell() {
  var table = document.getElementById("myTable");
  var newRow = document.createElement("tr");

  for (var i = 0; i < 3; i++) {
    var newCell = document.createElement("td");
    newCell.textContent = "新单元格内容" + (i + 1);
    newRow.appendChild(newCell);
  }

  table.appendChild(newRow);
}
</script>
</body>
</html>

在这个案例中，我们创建了一个包含两行的表格，并通过一个按钮调用addCell()函数来在表格的第一行添加三个新的单元格。

通过以上教程和实战案例，相信你已经掌握了使用原生JS添加表格TD元素的方法。在实际开发中，你可以根据需要灵活运用这些方法，为你的网页添加丰富的表格内容。

-- 展开阅读全文 --