在网页的表格效果中,有一种效果是非常漂亮的,就是仅仅使用JavaScript配合HTML完成的网页的表格的动态增加
和减少或者删除的效果,这样的效果能让人感觉到网页的动态效果非常好,以后可以作为一个项目模版拷贝使用。
下面我们就来实现这样的一个简单的效果,主要是根据不同的按钮实现增加表格的一行或者删除表格的一行或者遍历表
格这样的效果。下面请看代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>table.html</title>
<script type="text/javascript">
function test(){
//取出所有行
var myrows = mytab.rows;
for(var i = 0; i < myrows.length; i++){
//取出每一行
var eachRow = myrows[i].cells;
for(var t=0; t<eachRow.length;t++)
window.alert(eachRow[t].innerText);
}
}
function test2(){
mytab.deleteRow(1);
}
function test3(){
var tableRow = mytab.insertRow(3);
tableRow.insertCell(0).innerText="3";
tableRow.insertCell(1).innerText="吴用";
tableRow.insertCell(2).innerText="智多星";
}
</script>
</head>
<body>
<h1>水浒英雄排行榜</h1>
<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>
<br/>
<input type="button" οnclick="test();" value="testing"/><br/>
<input type="button" οnclick="test2();" value="删除一行"/><br/>
<input type="button" οnclick="test3();" value="插入一行"/><br/>
</body>
</html>
其实很简单,这要是对应Table这个对象进行的操作,很多函数这里都没有使用到,具体要求的时候还是需要去查看
文档的,这里只是一个指引。