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>
<table id="table" class="dataList" >
<caption>表格测试</caption>
<tr><th>姓名</th><th>年龄</th><th>手机</th><th>地址</th></tr>
<tr><td>张三</td><td>22</td><td>22</td><td>杭州市西湖区</td></tr>
<tr><td>李四</td><td>33</td><td>33</td><td>33</td></tr>
<tr><td>王五</td><td>44</td><td>44</td><td>44</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. 动态改变单元格内容
<script language = "javas
var table = document.getElementById("table");
table.rows[2].cells[2].innerHTML = "我niu";
</script>
3. 动态删除行
<script language = "javas
Function myDelete(){
var table = document.getElementById("table");
//删除该行， 根据dom父子节点的关系
this.parentNode.parentNode.parentNode.removeChild(“this.parentNode.parentNode”);
}
//动态增加delete链接
Window.on
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.on
}
}
</script>
4. 删除列
//自定义删除列函数
Function deleteColumn(otable,inum){
For（var i=0;i<otable;i++）
Otable.rows[i].deleteCell(inum);
}
//调用
Window.on
var otable = document.getElementById(“table”);
deleteCoumn(otable,2)
}
