参考资料

1. HTML DOM 哪个元素被按下了？
2. HTML DOM 返回文档的最后一次修改时间 实例
3. HTML DOM弹出下拉列表中所有选项
4. HTML DOM 返回image的longdesc属性的值
5. HTML DOM 返回图像映射的某个区域的protocol 实例
6. HTML DOM改变下拉列表中被选中的选项的文本
7. HTML DOM 访问
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";