table 对象

来源：互联网发布：淘宝1元秒杀商品编辑：程序博客网时间：2024/06/08 14:58

table 对象

概述，在我们的网页中，每出现一次 table标签，就会有一个table对象产生.

table对象中的集合对象有两个

rows[] 还有一个 cells[]
rows[] 表示所有行的一个集合

cells[] 表示一行的所有列

案例

要求，点击testing 按钮可以显示宋江的名字,但是不能通过id 获取 table对象来获取.

<html>

<head>
<script type="text/javascript"> function test(){

//window.alert(document.getElementById('name').innerText);

var mytable=document.getElementById("mytab");//mytable就是一个table对象

window.alert(mytable.rows[2].cells[2].innerText);

//window.alert(typeof(mytable));

//请取出卢俊义的外号

}

function addHero(){

//创建一个

//document.createElement("<tr>");

//添加一行

var mytable=document.getElementById("mytab");

//3表示添加到表格的第几行

//tableRow表示一个新行，它的类型是TableRow

var tableRow=mytable.insertRow(3); //<tr></tr>

//通过tableRow添加新列 tableCell类型是 TableCell

var tableCell=tableRow.insertCell(0); //<tr><td></td></tr>

tableCell.innerHTML="3"; //<tr><td>3</td></tr>

var tableCell1=tableRow.insertCell(1);

tableCell1.innerHTML="吴用"; //<tr><td>3</td><td>吴用</td></tr>

var tableCell2=tableRow.insertCell(2);

tableCell2.innerHTML="智多星"; //<tr><td>3</td><td>吴用</td></tr>

}

function deleteHero(){

//删除一个英雄

var mytable=document.getElementById("mytab");

mytable.deleteRow(3);

} function updateHero(){

//找到宋江的外号这个对象<td></td> TableCell

var mytable=document.getElementById("mytab");

mytable.rows[1].cells[2].innerHTML="黑三郎";

}

</script>

</head>

</table>
<input type="button" onclick="test()" value="tesing"/>

Table对象的综合案例

实现两个功能：1.动态添加 2.如果有重复，弹出了跳窗有重复。

<html>

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');

//window.alert(no+" "+heroname+" "+nickname);

//先判断，再添加

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>

</head>

<body>

</table>
<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/>

</body>

</html>

0 0