参考资料

1. HTML DOM 返回图像映射的某个区域的port 实例
2. HTML DOM获得下拉列表的选项数量
3. HTML DOM获得有下拉列表的表单的ID
4. HTML DOM 返回图像映射的某个区域的shape 实例
5. HTML DOM 对image排版
6. HTML DOM 哪个事件发生了？
7. HTML DOM 返回一个表单target属性的值
8. HTML DOM 返回和设置链接的charset属性实例

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";
  // ...之后的代码...
}