你的位置:首页 > Java教程

[Java教程]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/