JavaScript表格(table)操作方法

LibraryPKU 2013-11-07

展开全文

假设想使用DOM来创建如下的HTML表格： table border = 1 width = 100% tbody tr td 单元格1,1 / td td 单元格2,1 / td / tr tr td 单元格1,2 / td td 单元格2,2 / td / tr / tbody / table 如果想通过核心DOM方法来完成这

假设想使用DOM来创建如下的HTML表格：

<table border="1" width="100%"> 
    <tbody> 
        <tr> 
            <td>单元格 1,1</td> 
            <td>单元格 2,1</td> 
        </tr> 
        <tr> 
            <td>单元格 1,2</td> 
            <td>单元格 2,2</td> 
        </tr> 
    </tbody> 
</table>

如果想通过核心DOM方法来完成这个任务，代码如下：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>js table</title> 
</head> 
<body> 
 
<script type="text/javascript"> 
//创建表格 
var oTable = document.createElement("table"); 
oTable.setAttribute("border","1"); 
oTable.setAttribute("width","100%"); 
 
//创建tbody 
var oTbody = document.createElement("tbody"); 
oTable.appendChild(oTbody); 
 
//创建表格的第一行 
var oTR_1 = document.createElement("tr"); 
oTbody.appendChild(oTR_1); 
 
var oTD_11 = document.createElement("td"); 
oTD_11.appendChild(document.createTextNode("单元格 1,1")); 
oTR_1.appendChild(oTD_11); 
var oTD_21 = document.createElement("td"); 
oTD_21.appendChild(document.createTextNode("单元格 2,1")); 
oTR_1.appendChild(oTD_21); 
 
//创建表格的第二行 
var oTR_2 = document.createElement("tr"); 
oTbody.appendChild(oTR_2); 
 
var oTD_12 = document.createElement("td"); 
oTD_12.appendChild(document.createTextNode("单元格 1,2")); 
oTR_2.appendChild(oTD_12); 
var oTD_22 = document.createElement("td"); 
oTD_22.appendChild(document.createTextNode("单元格 2,2")); 
oTR_2.appendChild(oTD_22); 
 
//将表格添加到页面上 
document.body.appendChild(oTable); 
</script> 
 
</body> 
</html>

运行结果：

不难发现，上面这段代码十分的冗长而且难于理解，可读性极差。为了更好的协助建立表格，HTML DOM给<table>、<tbody>和<tr>等元素添加了一些特性和方法，这样就能更加方便的创建表格了。

<table/>元素的方法如下：

caption：指向<caption/>元素（如果存在）；
tBodies：<tbody/>元素的集合；
tFoot：指向<tfoot/>元素（如果存在）；
tHead：指向<thead/>元素（如果存在）；
rows：表格中所有行的集合；
createTHead()：创建<thead/>元素并将其放入表格；
createTFoot()：创建<tfoot/>元素并将其放入表格；
createCaption()：创建<caption/>元素并将其放入表格；
deleteTHead()：删除<thead/>元素；
deleteTFoot()：删除<tfoot/>元素；
deleteCaption()：删除<caption/>元素；
deleteRow(position)：删除指定位置上的行；
insertRow(position)：在rows集合中指定的位置上插入一新行。

<tbody/>元素的方法如下：

rows：<tbody/>中所有行的集合；
deleteRow(position)：删除指定位置上的行；
insertRow(position)：在rows集合中指定的位置上插入一新行。

<tr/>元素的方法如下：

cells：<tr/>元素中所有的单元格的集合；
deleteCell(position)：删除给定位置上的单元格；
insertCell(position)：在Cells集合的给定位置上插入一个新的单元格。

上面的一切意味着什么？简单地说，它意味着如果使用这些简便的属性和方法就可以大大降低创建表格的复杂度，代码的运行结果跟上面的一样，创建同样一张表格：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>DOM 创建表格</title> 
</head> 
<body> 
<script type="text/javascript"> 
//创建表格 
var oTable = document.createElement("table"); 
oTable.setAttribute("border","1"); 
oTable.setAttribute("width","100%"); 
 
//创建tbody 
var oTbody = document.createElement("tbody"); 
oTable.appendChild(oTbody); 
 
//创建表格的第一行 
oTbody.insertRow(0); 
oTbody.rows[0].insertCell(0); 
oTbody.rows[0].cells[0].appendChild(document.createTextNode("单元格 1,1")); 
oTbody.rows[0].insertCell(1); 
oTbody.rows[0].cells[1].appendChild(document.createTextNode("单元格 1,2")); 
 
//创建表格的第二行 
oTbody.insertRow(1); 
oTbody.rows[1].insertCell(0); 
oTbody.rows[1].cells[0].appendChild(document.createTextNode("单元格 2,1")); 
oTbody.rows[1].insertCell(1); 
oTbody.rows[1].cells[1].appendChild(document.createTextNode("单元格 2,2")); 
 
//将表格添加到页面上 
document.body.appendChild(oTable); 
</script> 
</body> 
</html>

在这段代码中，创建<table/>和<tbody/>元素的方法没有改变，创建行的方法则用的是HTML DOM Table(表格)的属性和方法。要创建第一行，对<tbody/>元素调用insertRow()方法，并传递给它一个参数0，表示新增的这一行要放在什么位置上。然后可以通过oTbody.rows[0]来引用新增的这一行，因为这一行已经被自动创建并添加到<tbody>元素中的第0个位置上了。

以类似的方式可以创建单元格，对<tr/>元素调用insertCell()方法并传入要创建单元格的位置。可以通过oTbody.rows[0].cells[0]来引用新创建的这个单元格，因为单元格已经被创建并插入到这一行的第0个位置上。

虽然从技术角度上来说，以上两种代码都是正确的，但是使用这些特性和方法来创建表格是的代码变得更加有逻辑且更加易读。

完整测试源码下载地址：