参考资料

1. HTML DOM指定表格的frame
2. HTML DOM 返回一个区域的href属性的锚部分实例
3. HTML DOM 返回一个iframe中的name属性的值
4. HTML DOM 返回图像映射的某个区域的target的值 实例
5. HTML DOM将下拉列表变成多行列表
6. HTML DOM删除下拉列表中的选项
7. HTML DOM 返回一个button的type 实例
8. HTML DOM 返回一个表单target属性的值

HTML DOM 改变单元格内容

基本介绍

HTML DOM (文档对象模型) 允许通过 JavaScript 动态改变 HTML 表格单元格(td)的内容。

主要标签

• <table>: 定义表格

• <tr>: 定义表格行

• <td>: 定义表格单元格

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

基本用法

通过 DOM 方法访问和修改单元格内容：

// 获取单元格
var cell = document.getElementById("cellId");

// 修改内容
cell.innerHTML = "新内容";

实例

示例1: 通过ID修改单元格

<table>
  <tr>
    <td id="cell1">原始内容</td>
  </tr>
</table>

<script>
  document.getElementById("cell1").innerHTML = "修改后的内容";
</script>

示例2: 通过行列索引修改单元格

<table id="myTable">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

<script>
  var table = document.getElementById("myTable");
  table.rows[1].cells[0].innerHTML = "修改第二行第一列";
</script>

功能扩展

DOM 操作不仅可以修改内容，还可以：

• 添加/删除单元格

• 修改单元格属性

• 改变单元格样式

CSS 扩展

可以通过 JavaScript 修改单元格的样式：

// 修改单个单元格样式
cell.style.backgroundColor = "yellow";
cell.style.color = "red";
cell.style.fontWeight = "bold";

// 或通过CSS类
cell.className = "highlight";

对应的CSS:

.highlight {
  background-color: yellow;
  color: red;
  font-weight: bold;
}

动态创建单元格

var newRow = table.insertRow(); // 插入新行
var newCell = newRow.insertCell(); // 插入新单元格
newCell.innerHTML = "新单元格内容";