参考资料

1. HTML DOM 节点列表长度
2. HTML DOM 返回文档中锚的数目
3. HTML DOM弹出下拉列表中所有选项
4. HTML DOM 返回一个button的value 实例
5. HTML DOM 用指定的Name弹出元素的数量实例
6. HTML DOM在下拉列表中选择多个选项
7. HTML DOM 返回一个表单中所有元素的value 实例
8. HTML DOM 打开输出流，向流中输入文本实例

HTML DOM改变单元格的内容

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 = "新单元格内容";