参考资料

1. HTML DOM 返回图像映射的某个区域的hostname实例
2. HTML DOM 事件
3. HTML DOM 返回image的替代文本
4. HTML DOM指定表格的frame
5. HTML DOM 返回页面上所有相对链接的基链接 实例
6. HTML DOM 返回一个锚的名字 实例
7. HTML DOM 打开输出流，向流中输入文本实例
8. HTML DOM 返回image的name

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

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