Table cells 集合
Table cells 集合
定义和用法
cells 集合返回表中所有 <td> 或 <th> 元素的集合。
注释：集合中的元素按照它们在源代码中出现的顺序进行排序。
提示：使用 rows 集合 返回表中所有 <tr> 元素的集合。
提示：请使用 insertRow() 方法 创建新行 (<tr>)。
提示：请使用 deleteRow() 方法 删除行。
提示：请使用 insertCell() 方法 创建新单元格 (<td>)。
提示：请使用 deleteCell() 方法 删除单元格。
另请参阅：
HTML 参考手册：HTML <td> 标签
HTML 参考手册：HTML <th> 标签
JavaScript 参考手册：HTML DOM TableData 对象
JavaScript 参考手册：HTML DOM TableHeader 对象
实例
例子 1
显示第一行的单元格数：
var x = document.getElementById("myTable").rows[0].cells.length;
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可返回表格第一行中的单元格数量。</p>
<table id="myTable">
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>
<br>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myTable").rows[0].cells.length;
document.getElementById("demo").innerHTML = "已在第一个 tr 元素中找到 " + x + " 个单元格。";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
x 的结果将是：
2
例子 2：[index]
输出表格第一行中第一个单元格的 innerHTML：
alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可提示 innerHTML 表格第一行中的第一个单元格（索引为 0 的 td 元素）。</p>
<table id="myTable">
<tr>
<td>行 1 单元格 1</td>
<td>行 1 单元格 2</td>
</tr>
<tr>
<td>行 2 单元格 1</td>
<td>行 2 单元格 2</td>
</tr>
<tr>
<td>行 3 单元格 1</td>
<td>行 3 单元格 2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 3：item(index)
输出表格第一行中第一个单元格的 innerHTML：
alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可提示 innerHTML 表格第一行中的第一个单元格（索引为 0 的 td 元素）。</p>
<table id="myTable">
<tr>
<td>行 1 单元格 1</td>
<td>行 1 单元格 2</td>
</tr>
<tr>
<td>行 2 单元格 1</td>
<td>行 2 单元格 2</td>
</tr>
<tr>
<td>行 3 单元格 1</td>
<td>行 3 单元格 2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 4：namedItem(id)
输出表格第一行中 id="myTd" 的单元格的 innerHTML：
alert(document.getElementById("myTable").rows[0].cells.namedItem("myTd").innerHTML);
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可提示表格第一行中 id="myTd" 的单元格的 innerHTML。</p>
<table id="myTable">
<tr>
<td id="myTd">行 1 单元格 1</td>
<td>行 1 单元格 2</td>
</tr>
<tr>
<td>行 2 单元格 1</td>
<td>行 2 单元格 2</td>
</tr>
<tr>
<td>行 3 单元格 1</td>
<td>行 3 单元格 2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
alert(document.getElementById("myTable").rows[0].cells.namedItem("myTd").innerHTML);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 5
更改第一个表格单元格的内容：
var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可更改第一个表格单元格的内容。</p>
<table id="myTable">
<tr>
<td>行 1 单元格 1</td>
<td>行 1 单元格 2</td>
</tr>
<tr>
<td>行 2 单元格 1</td>
<td>行 2 单元格 2</td>
</tr>
<tr>
<td>行 3 单元格 1</td>
<td>行 3 单元格 2</td>
</tr>
</table>
<br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "新的内容";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
tableObject.cells
属性
| 属性 | 描述 |
|---|---|
| length |
返回集合中 <td> 和/或 <th> 元素的数量。 注释：此属性是只读的。 |
方法
| 方法 | 描述 |
|---|---|
| [index] |
返回集合中有指定索引的 <td> 和/或 <th> 元素（从 0 开始）。 注释：如果索引号超出范围，则返回 null。 |
| item(index) |
返回集合中有指定索引的 <td> 和/或 <th> 元素（从 0 开始）。 注释：如果索引号超出范围，则返回 null。 |
| namedItem(id) |
从拥有指定 id 的集合中返回 <td> 和/或 <th> 元素。 注释：如果 id 不存在，则返回 null。 |
技术细节
| DOM 版本： | Core Level 2 Document Object |
|---|---|
| 返回值： |
HTMLCollection 对象，表示 <tr> 元素中的所有 <td> 和/或 <th> 元素。 集合中的元素按照它们在源代码中出现的顺序进行排序。 |
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
