HTML DOM添加表格中的行

HTML DOM 添加表格中的行

详细介绍

HTML DOM 提供了向表格中添加新行的方法，主要通过 insertRow() 方法实现。这个方法可以在表格的指定位置插入新行。

相关标签和方法

• <table>: 定义表格

• <tr>: 定义表格行

• <td>: 定义表格单元格

• insertRow(): 在表格中插入新行的方法

• insertCell(): 在行中插入新单元格的方法

用法

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

// 在表格末尾添加新行
var newRow = table.insertRow();

// 在指定位置添加新行（索引从0开始）
var newRow = table.insertRow(2); // 在第3行位置插入新行

// 向行中添加单元格
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);

// 设置单元格内容
cell1.innerHTML = "新单元格1";
cell2.innerHTML = "新单元格2";

实例

<table id="myTable" border="1">
  <tr>
    <td>行1，单元格1</td>
    <td>行1，单元格2</td>
  </tr>
  <tr>
    <td>行2，单元格1</td>
    <td>行2，单元格2</td>
  </tr>
</table>

<button onclick="addRow()">添加行</button>

<script>
function addRow() {
  var table = document.getElementById("myTable");
  var newRow = table.insertRow();
  
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  
  cell1.innerHTML = "新行，单元格1";
  cell2.innerHTML = "新行，单元格2";
}
</script>

功能

• 动态地向表格中添加新行

• 可以在表格的任何位置插入行

• 可以指定行的索引位置

• 可以添加任意数量的单元格到新行中

CSS 扩展

可以为动态添加的行添加样式：

/* 表格基础样式 */
#myTable {
  width: 100%;
  border-collapse: collapse;
}

/* 所有单元格样式 */
#myTable td {
  padding: 8px;
  border: 1px solid #ddd;
}

/* 奇数行背景色 */
#myTable tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 鼠标悬停效果 */
#myTable tr:hover {
  background-color: #e9e9e9;
}

/* 动态添加的行特殊样式 */
.new-row {
  background-color: #dff0d8 !important;
  font-weight: bold;
}

在 JavaScript 中添加行时可以应用样式类：

function addRow() {
  // ...之前的代码...
  newRow.className = "new-row";
  // ...之后的代码...
}