javascript添加或者删除table表格行代码实例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript添加或者删除table表格行代码实例相关的知识，希望对你有一定的参考价值。
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 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格