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/
原标题：javascript添加或者删除table表格行代码实例
关键词：JavaScript
我知道了 