一：table对象
概述，在我们的网页中，每出现一次 table标签，就会有一个table对象产生.
table对象 中的集合对象有两个
rows[] 还有一个 cells[]
rows[] 表示所有行的一个集合
cells[] 表示一行的所有列
二：table案例1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function test(){
var mytable=document.getElementById("mytab");象
window.alert(mytable.rows[2].cells[2] .innerText );
}
function addHero(){
var mytable=document.getElementById("mytab");
var tableRow=mytable.insertRow(3);
var tableCell=tableRow.insertCell(0);
tableCell.innerHTML="3";
var tableCell1=tableRow.insertCell(1);
tableCell1.innerHTML="吴用";
var tableCell2=tableRow.insertCell(2);
tableCell2.innerHTML="智多星";
}
function deleteHero(){
var mytable=document.getElementById("mytab");
mytable.deleteRow(3);
}
function updateHero(){
var mytable=document.getElementById("mytab");
mytable.rows[1].cells[2].innerHTML="黑三郎";
}
</script>
</head>
<body>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>宋江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<input type="button" onclick="test()" value="tesing"/>
<input type="button" onclick="addHero()" value="添加"/>
<input type="button" onclick="deleteHero()" value="删除"/>
<input type="button" onclick="updateHero()" value="修改"/>
</body>
</html>
三：修改上面案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function addhero(){
//获取用户的输入信息
var no=document.getElementById(‘no‘).value;
var heroname=document.getElementById(‘heroname‘).value;
var nickname=document.getElementById(‘nickname‘).value;
var mytab=document.getElementById(‘mytab‘);
//先判断，再添加
for(var i=0;i<mytab.rows.length;i++){
if(mytab.rows[i].cells[0].innerHTML==no){
window.alert("编号重复");
return false;
}
//在遍历的时候，要想办法确定这个新的英雄，适当的位置.
}
//添加一行
//获取table对象
var tableRow=mytab.insertRow(mytab.rows.length);
tableRow.insertCell(0).innerHTML=no;
tableRow.insertCell(1).innerHTML=heroname;
tableRow.insertCell(2).innerHTML=nickname;
tableRow.insertCell(3).innerHTML="<a href=‘#‘ onclick=‘abc(‘"+no+"‘)‘>删除用户</a>"
}
</script>
<body>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td><td>删除</td></tr>
</table>
<hr>
<h1>请输入人物的信息</h1>
排名<input type="text" id="no" name="no"/><br/>
名字<input type="text" id="heroname" name="heroname" /><br/>
外号<input type="text" id="nickname" name="nickname" /><br/>
<input type="button" onclick="addhero()" value="添加"/>
</body>
</html>
版权声明：博主原创文章，转载请说明出处。http://blog.csdn.net/dzy21