JavaScript中的Table属性有哪些用途和功能？

JavaScript Table 对象属性

JavaScript 的Table 对象为网页开发者提供了操作 HTML 表格（<table> 标签）的强大功能，通过Table 对象，开发者能够动态地创建、读取和修改表格的内容和结构，下面将详细介绍Table 对象的几个重要属性及其应用。

Table 对象的集合属性

cells

描述：cells 属性返回一个包含表格中所有单元格的数组。

rows

描述：rows 属性返回表格中所有行的集合。

tbody

描述：tbody 属性返回表格中所有<tbody> 元素的集合。

Table 对象的静态属性

createCaption

描述：createCaption() 方法创建一个<caption> 元素，并返回其引用。

createTHead

描述：createTHead() 方法创建一个<thead> 元素，并返回其引用。

createTFoot

描述：createTFoot() 方法创建一个<tfoot> 元素，并返回其引用。

createTBody

描述：createTBody() 方法创建一个<tbody> 元素，并返回其引用。

Table 对象的样式属性

align

描述：align 属性设置或返回表格相对于周围文本的对齐方式。

bgColor

描述：bgColor 属性设置或返回表格的背景颜色。

border

描述：border 属性设置或返回表格边框的宽度。

height

描述：height 属性设置或返回<img> 的高度。

width

描述：width 属性设置或返回<img> 的宽度。

Table 对象的过时属性

frame

描述：frame 属性已过时，不再推荐使用，应使用 CSS 的borderspacing 属性代替。

相关实例

在 HTML 文档中，每出现一次<table> 标签，就会创建一个 Table 对象，一个简单的 HTML 表格可以如下定义：

<table id="myTable">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
</table>

通过 JavaScript，我们可以这样访问上述表格：

var table = document.getElementById("myTable");

可以使用 Table 对象的属性进行操作，如添加新行：

var newRow = table.insertRow(1); // 插入新行
var cell1 = newRow.insertCell(0); // 在新行中插入第一个单元格
var cell2 = newRow.insertCell(1); // 在新行中插入第二个单元格
cell1.innerHTML = "二月";          // 设置单元格内容
cell2.innerHTML = "￥5000";        // 设置单元格内容

相关问题与解答

JavaScript 表格操作中如何添加表头？

可以使用createTHead() 方法创建一个<thead> 元素，然后使用insertRow() 和insertCell() 方法添加表头的内容。

var thead = table.createTHead(); // 创建表头
var headerRow = thead.insertRow(0); // 在表头中插入行
for (var i = 0; i < 2; i++) {      // 循环添加表头单元格
  var cell = headerRow.insertCell(i);
  cell.innerHTML = (i === 0) ? "月份" : "储蓄";
}

JavaScript 表格中如何实现行列的交替颜色？

虽然Table 对象本身不提供直接的方法来实现这一效果，但可以通过操作表格的行（<tr>）元素的 CSS 样式来实现，可以给奇数行和偶数行分别添加不同的类名，然后在 CSS 中定义这些类名对应的背景颜色。

var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
  if (i % 2 === 0) { // 如果是奇数行
    rows[i].className = "oddRow";
  } else {            // 如果是偶数行
    rows[i].className = "evenRow";
  }
}

在 CSS 中定义类名：

.oddRow {backgroundcolor: #f2f2f2;}
.evenRow {backgroundcolor: #cccccc;}