参考资料

1. HTML DOM 节点列表长度
2. HTML DOM 返回文档的完整的URL实例
3. HTML DOM 导航节点关系
4. HTML DOM 获取第一个链接ID的实例
5. HTML DOM 方法
6. HTML DOM 返回一个button的value 实例
7. HTML DOM 返回文档中表单数目
8. 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";
  // ...之后的代码...
}