javascript添加或者删除table表格行代码实例:
表格是常用的元素，虽然在布局中已经鲜有使用，已经基本被div css所取代，但是在组织表格数据方面还是有很大的优势的，比使用div css要来的方便，添加或者删除一行也就是其中的tr更是最为常见的操作，下面就通过代码实例简单介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function add(){
for(var i=0;i<thetable.rows.length;i++)
{
var eachRow=thetable.rows[i];
if(eachRow.cells[0].innerHTML==num.value)
{
alert("编号已经存在！");
return ;
}
}
var newTableRow=thetable.insertRow(thetable.rows.length);
newTableRow.insertCell(0).innerHTML=num.value;
newTableRow.insertCell(1).innerHTML=course.value;
newTableRow.insertCell(2).innerHTML=anthor.value;
}
function del(){
thetable.deleteRow(thetable.rows.length-1);
}
window.onload=function()
{
var oadd=document.getElementById("add");
var odel=document.getElementById("del");
oadd.onclick=function(){add()}
odel.onclick=function(){del()}
}
</script>
</head>
<body>
<table id="thetable" border="1">
<tr>
<td>序号</td>
<td>教程</td>
<td>作者</td>
</tr>
<tr>
<td>1</td>
<td>javascript教程</td>
<td>antzone</td>
</tr>
<tr>
<td>2</td>
<td>div css教程</td>
<td>蚂蚁部落</td>
</tr>
</table>
<ul>
<li>序号:<input id="num" type="text" value=""></li>
<li>教程:<input id="course" type="text" value=""></li>
<li>作者:<input id="anthor" type="text" value=""></li>
<li>
<input type="button" value="添加" id="add" />
<input type="button" value="删除最后一行" id="del"/>
</li>
</ul>
</body>
</html>
以上代码实现了我们的要求，可以删除或者添加一行，代码比较简单这里就不多介绍了，可以参阅相关阅读。
相关阅读:
1.rows集合可以参阅表格table对象的rows集合用法简单介绍一章节。
2.cells集合可以参阅javascript的table对象的cell单元格集合用法介绍一章节。
3.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
4.insertRow()函数可以参阅js的insertRow()函数用法简单介绍一章节。
5.insertCell()函数可以参阅js的insertCell()函数用法简单介绍一章节。
6.deleteRow()函数可以参阅js的deleteRow()函数用法简单介绍一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11878
更多内容可以参阅:http://www.softwhy.com/javascript/
时间： 2024-10-12 13:08:03