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