16.5 用DOM处理表格
在DOM中，有专门用于处理表格及其元素的属性和方法，其名称与HTML表格中的元素和属性名称相似。本节介绍这些属性和方法的使用。限于篇幅，不再单独列出这些属性和方法，有兴趣的读者，可以参考DOM的相关文档。
16.5.1 HTML 4中的表格
HTML 4中的<table>有着与DOM中很相似的属性名，这些属性包括：align、bgColor、border、cellPadding、cellSpacing与width。HTML 4中，扩展后的表格可以支持下面的结构。
一个表示开始的<table>标签。
一个可选的、由<caption> …
</caption>定义的标题行。
一行或多行组成的群组。这些行可以包括：由<thead>定义的表头、由<tfoot>定义的脚注，以及由<tbody>定义的表体，这些项目都是可选的。一个表格至少应包含一个由<tr>定义的行，该行还必须包含至少一个表体头或一个数据表元，分别由<th>和<td>来定义。
一个由<col>定义的群组中包含的列，该列又包含由<columngroup>定义的一列或多列组成的群组。
一个表示关闭的</table>标签。
同时，HTML还为表格定义了以下属性。
一个frame属性，用来设置表格具有的框架类型。
一个rules属性，用来设置该规则在行和列中应放置的位置。
一个summary属性，用来定义表格在非可视化浏览器中的呈现样式。
代码16.16允许用户对表格的属性进行重新设置。
代码16.16 设置表格属性：16.16.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>设置表格属性</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<center><h1>设置表格属性</h1></center><p>
<!--表格开始-->
<table border="1" frame="box" id="testTable">
<!--标题-->
<caption>Test Table</caption>
<thead><!--表头-->
<tr>
<th>Product</th>
<th>SKU</th>
<th>Price</th>
</tr>
</thead>
<!-- 这里是脚注，本例中放在了表体之前-->
<tfoot>
<tr>
<th colspan="3">This has been an HTML 4 table example, thanks for reading</th>
</tr>
</tfoot>
<tbody> <!--表体之一-->
<tr>
<th colspan="3" align="center">Robots</th> <!--表体一的头部-->
</tr>
<tr>
<td>Trainer Robot</td>
<td>TR-456</td>
<td>$56,000</td>
</tr>
<tr>
<td>Guard Dog Robot</td>
<td>SEC-559</td>
<td>$5,000</td>
</tr>
<tr>
<td>Friend Robot</td>
<td>AG-343</td>
<td>$124,000</td>
</tr>
</tbody>
<tbody><!--表体之二-->
<tr>
<th colspan="3" align="center">Jet Packs</th><!--表体二的头部-->
</tr>
<tr>
<td>Economy</td>
<td>JP-3455E6</td>
<td>$6,000</td>
</tr>
<tr>
<td>Deluxe</td>
<td>JP-9999d</td>
<td>$15,000</td>
</tr>
</tbody>
</table>
<br clear="all"><hr><br clear="all">
<script type="text/javascript">
<!--
//通过id获取表格属性
var theTable = document.getElementById('testTable');
//-->
</script>
<!--以下是控制表单-->
<form action="#" method="get">
<strong>Alignment:</strong>
<!--通过onchange来设置表格在文档中的对齐方式-->
<select onchange="theTable.align = this.options[this.selectedIndex].text;">
<option>left</option>
<option>center</option>
<option>right</option>
</select>
<strong>Background Color:</strong>
<!--通过onchange来设置表格背景颜色-->
<select onchange="theTable.bgColor = this.options[this.selectedIndex].text;">
<option>white</option>
<option>red</option>
<option>blue</option>
<option>yellow</option>
<option>orange</option>
<option>green</option>
<option>black</option>
</select>
<strong>Frames:</strong>
<!--通过onchange来设置表格Frame样式-->
<select onchange="theTable.frame = this.options[this.selectedIndex].text;">
<option>above</option>
<option>below</option>
<option>border</option>
<option>box</option>
<option>hsides</option>
<option>vsides</option>
<option>lhs</option>
<option>rhs</option>
<option>void</option>
</select>
<strong>Rules:</strong>
<!--通过onchange来设置表格rules方式-->
<select onchange="theTable.rules = this.options[this.selectedIndex].text;">
<option>all</option>
<option>cols</option>
<option>groups</option>
<option>none</option>
<option>rows</option>
</select>
<br><br>
<strong>Border:</strong>
<!--通过onchange来设置表格边框宽度-->
<input type="text" size="2" maxlength="2" value="1"
onchange="theTable.border = this.value;">
<strong>Cell Padding:</strong>
<!--通过onchange来设置表元填充方式-->
<input type="text" size="2" maxlength="2" value="1"
onchange="theTable.cellPadding = this.value;">
<strong>Cell Spacing:</strong>
<!--通过onchange来设置表元留空方式-->
<input type="text" size="2" maxlength="2" value="1"
onchange="theTable.cellSpacing = this.value;">
</form>
</body>
</html>
上面代码运行后的显示效果如图16.27所示。
按照页面上的按钮和选项进行操作，可以改变表格的属性。例如，选择alignment为center，Background Color为yellow，并设置Border为5，显示效果如图16.28所示。
图16.27 显示效果
图16.28 显示效果
16.5.2 设置表格属性
HTMLTableElement对象也包含对其附加元素的缩写形式。例如，tableElement.caption对应<caption>标签，tableElement.tHead和tableElement.tFoot分别对应<thead>和<tbody>标签。rows[]聚集和tBodies[]聚集则分别可以访问<tr>和<tbody>。在代码16.17中，去掉了代码16.16中一些无关的代码，并加上一段JavaScript代码，可以显示表格的相关属性。
代码16.17 设置表格属性：16.17.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>读取表格属性</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<center><h1>读取表格属性</h1></center><p>
<!--表格开始-->
<table border="1" frame="box" id="testTable">
<!--标题-->
<caption>Test Table</caption>
<thead><!--表头-->
<tr>
<th>Product</th>
<th>SKU</th>
<th>Price</th>
</tr>
</thead>
<!-- 这里是脚注，本例中放在了表体之前-->
<tfoot>
<tr>
<th colspan="3">This has been an HTML 4 table example, thanks for reading</th>
</tr>
</tfoot>
<tbody> <!--表体之一-->
<tr>
<th colspan="3" align="center">Robots</th> <!--表体一的头部-->
</tr>
<tr>
<td>Trainer Robot</td>
<td>TR-456</td>
<td>$56,000</td>
</tr>
<tr>
<td>Guard Dog Robot</td>
<td>SEC-559</td>
<td>$5,000</td>
</tr>
<tr>
<td>Friend Robot</td>
<td>AG-343</td>
<td>$124,000</td>
</tr>
</tbody>
tbody><!--表体之二-->
<tr>
<th colspan="3" align="center">Jet Packs</th><!--表体二的头部-->
</tr>
<tr>
<td>Economy</td>
<td>JP-3455E6</td>
<td>$6,000</td>
</tr>
<tr>
<td>Deluxe</td>
<td>JP-9999d</td>
<td>$15,000</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
<!--
//通过id获取表格属性
var theTable = document.getElementById('testTable');
document.writeln("<pre>");
//输出表的总行数
document.writeln("Overall table rows="+theTable.rows.length);
//输出表格中tbody的数量
document.writeln("Number of tbody tags="+theTable.tBodies.length);
//输出每个tbody中的行数
for (i = 0; i < theTable.tBodies.length; i++)
document.writeln("\t tbody["+i+"] number of rows = "
+theTable.tBodies[i].rows.length);
//输出tfoot中的行数
document.writeln("Rows in tfoot tag="+theTable.tFoot.rows.length);
//输出tbody中的行数
document.writeln("Rows in thead tag="+theTable.tHead.rows.length);
document.writeln("</pre>");
//-->
</script>
</body>
</html>
代码运行后的显示结果如图16.29所示。
图16.29 显示结果
16.5.3 操作表格元素
可以使用createTHead( )、createTFoot( )、createCaption( )与insertRow(index)等方法创建表格元素。其中，insertRow(index)中的index是一个数字，表示该行的序号，从0开始计数。相应的，可以使用deleteCaption( )、deleteTHead( )、deleteTFoot( )和 deleteRowIndex(index)等方法删除表格元素。例如，在代码16.18中，仍旧保留代码16.16中的表格，修改了其中的处理表单部分，就可以对表格元素进行操作。
代码16.18 操作表格元素：16.18.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>读取表格属性</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<center><h1>读取表格属性</h1></center><p>
<!--表格开始-->
<table border="1" frame="box" id="testTable">
<!--标题-->
<caption>Test Table</caption>
<thead><!--表头-->
<tr>
<th>Product</th>
<th>SKU</th>
<th>Price</th>
</tr>
</thead>
<!-- 这里是脚注，本例中放在了表体之前-->
<tfoot>
<tr>
<th colspan="3">This has been an HTML 4 table example, thanks for reading</th>
</tr>
</tfoot>
<tbody> <!--表体之一-->
<tr>
<th colspan="3" align="center">Robots</th> <!--表体一的头部-->
</tr>
<tr>
<td>Trainer Robot</td>
<td>TR-456</td>
<td>$56,000</td>
</tr>
<tr>
<td>Guard Dog Robot</td>
<td>SEC-559</td>
<td>$5,000</td>
</tr>
<tr>
<td>Friend Robot</td>
<td>AG-343</td>
<td>$124,000</td>
</tr>
</tbody>
<tbody><!--表体之二-->
<tr>
<th colspan="3" align="center">Jet Packs</th><!--表体二的头部-->
</tr>
<tr>
<td>Economy</td>
<td>JP-3455E6</td>
<td>$6,000</td>
</tr>
<tr>
<td>Deluxe</td>
<td>JP-9999d</td>
<td>$15,000</td>
</tr>
</tbody>
</table>
<br clear="all"><hr><br clear="all">
<script type="text/javascript">
<!--
//通过id获取表格属性
var theTable = document.getElementById('testTable');
//-->
</script>
<!--控制表单-->
<form name="testForm" id="testForm">
<!--文本框，用来输入要删除的行的序号-->
<input type="text" name="rowtodelete" id="rowtodelete" size="2"
maxlength="2" value="1">
<!--通过onclick调用theTable.deleteRow ()来删除行-->
<!--其中theTable.rows.length> 0表示存在行-->
<input type="button" value="删除行"
onclick="if (theTable.rows.length> 0)
theTable.deleteRow (document.testForm.rowtodelete.value);">
<!--文本框，用来输入要在其后插入的行的序号-->
<input type="text" name="rowtoinsert" id="rowtoinsert" size="2"
maxlength="2" value="1">
<!--通过onclick调用theTable.insertRow()来插入行-->
<input type="button" value="插入行"
onclick="theTable.insertRow(document.testForm.rowtoinsert.value);"><p>
<!--通过onclick调用theTable.deleteTHead()来删除表头-->
<input type="button" value="删除 <thead>" onclick="theTable.deleteTHead();">
<!--通过onclick调用theTable.deleteTFoot()来删除脚注-->
<input type="button" value="删除 <tfoot>" onclick="theTable.deleteTFoot();">
<!--通过onclick调用theTable.deleteCaption()来删除标题-->
<input type="button" value="删除 <caption>" onclick="theTable.deleteCaption();">
</form>
</body>
</html>
代码运行后的显示效果如图16.30所示。
单击页面中相应的按钮，即可完成对相应表格元素的操作。例如，先选择删除第四行，再删除<thead>和<caption>，显示效果如图16.31所示。
图16.30 显示效果
图16.31 显示效果
16.5.4 操作表元
在HTML的<td>标签中，还有一个cellIndex属性，表示当前行中表元的索引。可以通过该属性向insertCell( )方法和deleteCell( )方法传递参数，达到操作表元的目的。代码16.19是一个利用这两个方法插入和删除表元的例子。
代码16.19 插入和删除表元：16.19.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>插入和删除表元</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<center><h1>插入和删除表元</h1></center><p>
<!--定义一个两行两列的表格-->
<table id="table1" border="1">
<tr id="row1">
<td id="cell1">表元1</td>
<td id="cell2">表元2</td>
</tr>
<tr id="row2">
<td id="cell3">表元3</td>
<td id="cell4">表元4</td>
</tr>
</table>
<script type="text/javascript">
<!--
//通过id获取该表格的相关属性
var theTable = document.getElementById("table1");
function doRowInsert(row) //函数：插入行
{
var rowNumber = parseFloat(row); //对行数进行转换并存储
//如果输入的行数不小于0且不大于表格行数
if ((rowNumber>= 0) && (rowNumber <= theTable.rows.length))
theTable.insertRow(rowNumber); //插入该行
}
function doCellInsert(row,column) //函数：插入表元
{
var rowNumber = parseFloat(row); //对行数进行转换并存储
var colNumber = parseFloat(column); //对列数进行转换并存储
var numberRowsInTable = theTable.rows.length; //存储表格行数
//如果行数、列数都不小于0
if ((rowNumber>= 0 ) && (colNumber>= 0)){
//如果行号不小于表格行数
if (rowNumber>= numberRowsInTable){
//弹出对话框，提示不可操作
alert("Can't add beyond defined rows");
return; //返回
}
//如果列数大于表格中该行的列数
if (colNumber> theTable.rows[rowNumber].cells.length){
//弹出对话框，提示不可操作
alert("Can't add more than one beyond columns");
return;//返回
}
//在指定的行中插入指定列的表元
theTable.rows[rowNumber].insertCell(colNumber);
}
}
function doCellModification(row,column,newValue) //函数：编辑表元
{
var rowNumber = parseFloat(row); //对行数进行转换并存储
var colNumber = parseFloat(column); //对列数进行转换并存储
var numberRowsInTable = theTable.rows.length; //存储表格行数
//如果行数、列数都不小于0
if ((rowNumber>= 0 ) && (colNumber>= 0)){
//如果行号不小于表格行数
if (rowNumber>= numberRowsInTable){
//弹出对话框，提示不可操作
alert("Can't modify cells outside the table");
return;//返回
}
//如果列数不小于表格中该行的列数
if (colNumber>= theTable.rows[rowNumber].cells.length){
//弹出对话框，提示不可操作
alert("Can't modify cells outside the table");
return;//返回
}
//在指定的行、列中插入新的表元内容
theTable.rows[rowNumber].cells[colNumber].innerHTML = newValue;
}
}
function doCellDelete(row,column) //函数：删除表元
{
var rowNumber = parseFloat(row); //对行数进行转换并存储
var colNumber = parseFloat(column); //对列数进行转换并存储
var numberRowsInTable = theTable.rows.length; //存储表格行数
//如果行数、列数都不小于0
if ((rowNumber>= 0 ) && (colNumber>= 0)){
//如果行号不小于表格行数
if (rowNumber>= numberRowsInTable){
//弹出对话框，提示不可操作
alert("Can't delete beyond defined rows");
return; //返回
}
//如果列数不小于表格中该行的列数
if (colNumber>= theTable.rows[rowNumber].cells.length){
//弹出对话框，提示不可操作
alert("Can't delete beyond the column");
return; //返回
}
//删除指定行中的指定列
theTable.rows[rowNumber].deleteCell(colNumber);
}
}
//-->
</script>
<!--操作控制表单-->
<form name="testForm" id="testForm" action="#" method="get">
<!--输入要进行操作的行号，默认值为1-->
行号: <input type="text" name="rowtoinsert" id="rowtoinsert"
size="2" maxlength="2" value="1">
<!--通过onclick调用doRowInsert()函数完成插入行操作-->
<input type="button" value="插入行"
onclick="doRowInsert(document.testForm.rowtoinsert.value);"><br>
<!--输入要进行操作的行号，默认值为0-->
行号: <input type="text" name="insertionRow" id="insertionRow"
size="2" maxlength="2" value="0">
<!--输入要进行操作的列号，默认值为0-->
列号: <input type="text" name="insertionColumn" id="insertionColumn"
size="2" maxlength="2" value="0">
<!--通过onclick调用doCellInsert()函数完成插入列操作-->
<input type="button" value="插入列"
onclick="doCellInsert(document.testForm.insertionRow.value,
document.testForm.insertionColumn.value);"><br>
<!--输入要进行操作的行号，默认值为0-->
行号: <input type="text" name="modifyRow" id="modifyRow"
size="2" maxlength="2" value="0">
<!--输入要进行操作的列号，默认值为0-->
列号: <input type="text" name="modifyColumn" id="modifyColumn"
size="2" maxlength="2" value="0">
<!--输入表元的内容，用以替换旧的表元内容，默认值为空-->
新内容: <input type="text" name="newContents" id="newContents"
size="20" maxlength="20" value="">
<!--通过onclick调用doCellModification()函数完成编辑表元内容的操作-->
<!--其中的3个参数分别为行号、列号和表元内容-->
<input type="button" value="编辑表元内容"
onclick="doCellModification(document.testForm.modifyRow.value,
document.testForm.modifyColumn.value,
document.testForm.newContents.value);"><br>
行号: <input type="text" name="deletionRow" id="deletionRow"
size="2" maxlength="2" value="0">
列号: <input type="text" name="deletionColumn" id="deletionColumn"
size="2" maxlength="2" value="0">
<!--通过onclick调用doCellDelete()函数完成删除表元操作-->
<input type="button" value="删除表元"
onclick="doCellDelete(document.testForm.deletionRow.value,
document.testForm.deletionColumn.value);"><br>
</form>
</body>
</html>
上面代码的显示结果如图16.32所示。按照页面提示进行操作，就可以完成表元的插入和删除操作。
图16.32 显示结果
