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