参考资料

1. HTML DOM 返回表单中的enctype属性的值
2. HTML DOM弹出下拉列表中被选中的选项的索引
3. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
4. HTML DOM添加表格中的行
5. HTML DOM 返回一个button所属表的ID 实例
6. HTML DOM 哪个鼠标键被点击了？
7. HTML DOM 属性
8. HTML DOM 返回文档中第一个表单的名字

HTML DOM 添加表格行中的单元格

详细介绍

在HTML DOM中，可以通过JavaScript动态地向表格行中添加单元格。这通常用于在用户交互或数据加载时动态更新表格内容。

主要标签

• <table>: 定义表格

• <tr>: 定义表格行

• <td>: 定义标准单元格

• <th>: 定义表头单元格

基本用法

// 获取表格行
var row = document.getElementById("myRow");

// 创建新单元格
var cell = row.insertCell();

// 设置单元格内容
cell.innerHTML = "新单元格内容";

实例

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

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

<script>
function addCell() {
  var row = document.getElementById("row1");
  var cell = row.insertCell();
  cell.innerHTML = "新添加的单元格";
}
</script>

功能

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

• deleteCell(index): 删除指定索引的单元格

• cells: 获取行中的所有单元格集合

CSS扩展

可以为动态添加的单元格应用样式：

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

/* 单元格样式 */
td, th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/* 动态添加的单元格特殊样式 */
.dynamic-cell {
  background-color: #f2f2f2;
  font-weight: bold;
}

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

在JavaScript中应用CSS类：

cell.className = "dynamic-cell";