javascript学习1---用dom对象动态控制表格
来源:互联网 发布:iphone电脑同步软件 编辑:程序博客网 时间:2024/05/17 23:02
利用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)
}
- javascript学习1---用dom对象动态控制表格
- 在JavaScript中使用DOM技术动态控制表格
- 在JavaScript中使用DOM技术动态控制表格
- 在JavaScript中使用DOM技术动态控制表格 .
- JavaScript学习(5)DOM对象
- 【JavaScript】---DOM创建表格
- 【JavaScript】DOM操作表格
- DOM表格对象
- javaScript学习之HTML DOM Document对象
- JavaScript学习之DOM对象(转)
- JavaScript进阶学习——DOM对象
- JavaScript学习——DOM对象
- JavaScript学习9:DOM操作表格及样式
- DOM学习---DOM对象
- Struts动态控制表格大小
- Jquery动态控制表格行
- 动态控制表格列
- 动态控制表格insertRow,insertCell()
- 给每一个男孩的忠告
- ubuntu 拨号设置
- css学习3---css与div排版定位
- css学习4---css控制表格
- java实现数独的算法
- javascript学习1---用dom对象动态控制表格
- javascript学习2---判断浏览器类型及版本
- Java媒体框架(JMF)
- 10位photoshop顶尖设计大师
- 将普通的16进制颜色数值转换成UIColor表示形式的处理方法
- css学习5---常用的CSS命名规则
- SQL注入语句大全
- 李煜词全集
- 合格程序员每天每周每月每年应该做的事