Table rows 集合
Table 对象
定义和用法
rows 集合返回表格中所有行（TableRow 对象）的一个数组，即一个 HTMLCollection。
该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。
语法
tableObject.rows
属性
| 属性 | 描述 |
|---|---|
| length | 返回集合中 <tr> 元素的数目 |
方法
| Method | 描述 |
|---|---|
| [name_or_index] | 一个整数，指定元素检索位置（从0开始）td> |
| item(name_or_index) | 返回集合中的指定索引的元素 |
| namedItem(name) | 返回集合中指定名称的元素 |
浏览器支持
所有主要浏览器都支持 rows 集合
实例
显示表格中行的数目:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function displayResult() {
alert(document.getElementById("myTable").rows.length);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">显示表的行数</button>
</body>
</html>
更多实例
弹出第一行的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function showRow() {
alert(document.getElementById('myTable').rows[0].innerHTML);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<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>
<input type="button" onclick="showRow()" value="显示第一行的HTML文本">
</body>
</html>
添加行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function insCell() {
var x = document.getElementById('tr1').insertCell(0);
x.innerHTML = "The famous";
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="insCell()" value="插入单元格">
</body>
</html>
对齐表格行中的单元格内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function leftAlign() {
document.getElementById('header').align = "left";
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr id="header">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="leftAlign()" value="内容向右对齐" />
<p><b>注意:</b>该实例不适用IE浏览器。</p>
</body>
</html>
表中的行的单元格内容的垂直对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function topAlign() {
document.getElementById('tr2').vAlign = "top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>第一名字</th>
<th>下一个名字</th>
<th>文本</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>你好，我的名字叫Peter Griffin. 需要长文本来演示这个例子。 需要长文本来演示这个例子。
</td>
</tr>
</table>
<br>
<input type="button" onclick="topAlign()" value="垂直对齐" />
</body>
</html>
对齐单个单元格的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function alignCell() {
document.getElementById('td1').align = "right";
document.getElementById('td2').align = "right";
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>第一个名称</th>
<th>下一个名称</th>
</tr>
<tr>
<td id="td1">Peter</td>
<td id="td2">Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="alignCell()" value="右对齐单元格" />
</body>
</html>
单元格内容的垂直对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function valignCell() {
var x = document.getElementById('myTable').rows[0].cells;
x[0].vAlign = "bottom";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td height="50px">第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td height="50px">第三个单元格</td>
<td>第四个单元格</td>
</tr>
</table>
<form>
<input type="button" onclick="valignCell()" value="第一个单元格内容底部对齐">
</form>
</body>
</html>
改变表格单元格的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function changeContent() {
var x = document.getElementById('myTable').rows[0].cells;
x[0].innerHTML = "新内容";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<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>
<form>
<input type="button" onclick="changeContent()" value="修改内容">
</form>
</body>
</html>
合并单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜜蜂教程(mifengjc.com)</title>
<script>
function setColSpan() {
var x = document.getElementById('myTable').rows[0].cells;
x[0].colSpan = "2";
x[1].colSpan = "6";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td colspan="4">单元格 1</td>
<td colspan="4">单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
<td>单元格 5</td>
<td>单元格 6</td>
<td>单元格 7</td>
<td>单元格 8</td>
<td>单元格 9</td>
<td>单元格 10</td>
</tr>
</table>
<form>
<input type="button" onclick="setColSpan()" value="修改合并列">
</form>
</body>
</html>
Table 对象