ESSAY / NOTE
HTML DOM Table 对象 集合与属性的综合运用练习题
具体使用方法详解可以查看W3C手册 HTML DOM Table中的知识点
http://www.w3school.com.cn/jsref/dom_obj_table.asp
l 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>
<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>
Table对象动态添加综合案例
实现两个功能：1.动态添加 2.如果有重复，弹出了跳窗有重复。
<html>
<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');
//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 id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td><td>删除</td></tr>
</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/>
<input type="button" onclick="addhero()" value="添加"/>
</body>
</html>
l 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>
<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>
Table对象动态添加综合案例
实现两个功能：1.动态添加 2.如果有重复，弹出了跳窗有重复。
<html>
<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');
//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 id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td><td>删除</td></tr>
</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/>
<input type="button" onclick="addhero()" value="添加"/>
</body>
</html>