参考资料

  1. HTML DOM 获取第一个链接ID的实例
  2. HTML DOM 哪个事件发生了?
  3. HTML DOM 返回文档中表单数目
  4. HTML DOM 返回文档中的图像数
  5. HTML DOM 返回图像映射的某个区域的port 实例
  6. HTML DOM对单个单元格的内容水平对齐
  7. HTML DOM弹出下拉列表中所有选项
  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 = "新单元格内容";