参考资料

1. HTML DOM 返回文档中的图像数
2. HTML DOM 返回加载的当前文档的URL实例
3. HTML DOM弹出下拉列表中所有选项
4. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
5. HTML DOM 改变一个iframe的src
6. HTML DOM 返回image的longdesc属性的值
7. HTML DOM 返回一个button的name 实例
8. HTML DOM删除表格中的行

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";