html dom td/th对象表格单元格和表头单元格

表格单元格表头对象

HTML DOM中的td/th对象表示表格单元格，td表示普通单元格，th表示表头单元格。使用这两个对象，我们可以创建和操作表格，从而更好地显示数据。

<table>
  <tbody><tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</tbody></table>

上面的代码使用了th对象创建了表头，使用td对象创建了普通单元格，使用table对象将这些单元格组合起来，从而完成了一个表格的创建。

<table id="myTable">
  <tbody><tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</tbody></table>

使用td/th对象访问表格，需要使用id来获取该表格的引用，如上面的代码，我们可以使用document.getElementById("myTable")来获取表格的引用。我们可以使用表格引用的rows属性来获取表格的行，使用行的cells属性来获取行中的单元格，如下面的代码：

var table = document.getElementById("myTable");
var row = table.rows[0];
var cell = row.cells[0];

上面的代码获取了表格中第一行的第一个单元格，如果我们想要获取表头单元格，只需要将cells改为thCells即可：

var table = document.getElementById("myTable");
var row = table.rows[0];
var cell = row.thCells[0];

使用td/th对象修改表格，可以使用innerHTML属性来修改表格中的内容，如下面的代码：

var table = document.getElementById("myTable");
var row = table.rows[0];
var cell = row.cells[0];
cell.innerHTML = "新内容";

上面的代码将表格中第一行第一个单元格的内容修改为“新内容”。

使用td/th对象添加表格，可以使用insertRow和insertCell方法来添加表格行和单元格，如下面的代码：

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = "新单元格";

上面的代码将在表格的第一行添加一个新单元格，并将其内容设置为“新单元格”。

使用td/th对象删除表格，可以使用deleteRow和deleteCell方法来删除表格行和单元格，如下面的代码：

var table = document.getElementById("myTable");
table.deleteRow(0);
table.deleteCell(0);

上面的代码将删除表格中的第一行和第一个单元格。

使用td/th对象，我们可以很方便地创建、访问、修改和删除表格，从而更好地显示数据。

展开阅读全文

上一篇：使用JavaScript实现ajax的实例代码下一篇：Python类变量和实例变量（类属性和实例属性）