参考资料

1. HTML DOM改变单元格横跨的列数(colspan属性)
2. HTML DOM 返回文档中的所有cookies的名称/值对 实例
3. HTML DOM 节点列表长度
4. HTML DOM 返回图像映射的某个区域的pathname 实例
5. HTML DOM 返回一个表单target属性的值
6. HTML DOM 导航节点关系
7. HTML DOM指定表格的frame
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";
  // ...之后的代码...
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。