参考资料

1. HTML DOM 提交表单
2. HTML DOM 返回图像映射的某个区域的pathname 实例
3. HTML DOM 返回一个iframe中的longdesc属性的值
4. HTML DOM删除下拉列表中的选项
5. HTML DOM 返回和设置链接的charset属性实例
6. HTML DOM 改变iframe的高度和宽度
7. HTML DOM添加表格行中的单元格
8. 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 = "新单元格内容";

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