javascript学习1---用dom对象动态控制表格

利用dom对象模型的属性和方法可以很轻松的控制页面上的元素，包括增加删除等。而对于表格，html DOM还提供了一套专用的特性，使得操作更加方便。动态控制表格的方法，包括添加删除表格的行，列，单元格等。

常用dom操作：

	针对<table>元素
1	caption	指向<caption>元素（如果存在）
2	tBodies	指向<body>元素的集合
3	tHead	指向<head>元素（如果存在）
4	rows	指向所有行的集合
5	deleteRow(position)	删除指定位置上的行
6	insertRow(position)	在rows集合的指定位置插入一个新的行
7	createCaption()	创建一个<caption>并放入表格中
8	deleteCaption()	删除<caption>元素
	针对<tbody>元素
9	rows	<tbody>中的所有行的集合
10	deleteRows(position)	删除指定位置上的行
11	insertRows(position)	在rows集合中的指定位置插入一个新行
	针对<tr>元素
12	cells	<tr>中所有单元格的集合
13	deleteCell(position)	删除给定位置上的单元格
14	insertCell(position)	在cells集合的给定位置上插入一个新的单元格

Html文件如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> tableTest </TITLE>

<style>

.dataList{

border:1px solid #0058a3;

font-family:Arial;

border-collapse:collapse;

background-color:#eaf5ff;

font-size:14px;

}

.dataList caption{

padding-bottom:5px;

font:bold 1.4em;

text-align:left;

}

.dataList th{

border:1px solid #0058a3;

background-color:#4bacff;

color:#ffffff;

font-weight:bold;

padding-top:4px;

padding-bottom:4px;

padding-right:12px;

padding-left:12px;

}

.dataList td{

border:1px solid #0058a3;

text-align:left;

padding-top:4px;

padding-bottom:4px;

padding-right:10px;

padding-left:10px;

}

</style>

</HEAD>

<BODY>

<tr><td>张三</td><td>22</td><td>22</td><td>杭州市西湖区</td></tr>

</table>

</BODY>

</HTML>

1. 动态增加表格行

var otr = document.getElementById(“table”).insertRow(2);

var atext = new Array();

atext[0] = document.createTextNode(“gdfafffa”);

atext[1] = document.createTextNode(“fsffs”);

atext[2] = document.createTextNode(“fsafa”);

atext[3] = document.createTextNode(“fsdfaf”);

atext[4] = document.createTextNode(“13224321”);

for(var i=0;i<atext.length;i++){

var otd = otr.insertCell(i);

otd.appendChild(atext[i]);

}

2. 动态改变单元格内容

var table = document.getElementById("table");

table.rows[2].cells[2].innerHTML = "我niu";

</script>

3. 动态删除行

Function myDelete(){

var table = document.getElementById("table");

//删除该行，根据dom父子节点的关系

this.parentNode.parentNode.parentNode.removeChild(“this.parentNode.parentNode”);

}

//动态增加delete链接

Window.onload=function(){

Var otable =document.getElementById(“table”);

Var otd;

//动态添加delete链接

for(var i=0;i<otable.rows.length;i++){

otd = otable.rows[i].insertCell(5);

otd.innerHTML = “<a href=‘#’>delete</a>”

otd.firstChild.onclinck = myDelete; //添加删除事件

}

</script>

4. 删除列

//自定义删除列函数

Function deleteColumn(otable,inum){

For（var i=0;i<otable;i++）

Otable.rows[i].deleteCell(inum);

}

//调用

Window.onload = function(){

var otable = document.getElementById(“table”);

deleteCoumn(otable,2)

}