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