javescript完整操作Table的增加行，删除行的列子大全

<HTML> 
<TITLE>Form Object example</TITLE> 
<HEAD> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0Afunction%20delrow1()%20%0D%0A%7B%20%0D%0Avar%20oElement%3Devent.srcElement%3B%20%0D%0Awhile(oElement.tagName!%3D%22TR%22)%20%0D%0A%7B%20%0D%0AoElement%3DoElement.parentElement%3B%20%0D%0A%7D%20%0D%0Avar%20oTBody%3DoElement.parentElement%3B%20%0D%0AoTBody.removeChild(oElement)%20%0D%0A%7D%20%0D%0A%0D%0A%0D%0A%0D%0A%0D%0Afunction%20delrow2()%2F%2F%E5%88%AA%E9%99%A4%E5%BD%93%E5%89%8D%E8%A1%8C%20%0D%0A%7B%20%0D%0Avar%20currRowIndex%3Devent.srcElement.parentNode.parentNode.rowIndex%3B%20%0D%0Adocument.all.yltable.deleteRow(currRowIndex)%3B%2F%2Ftable10--%E8%A1%A8%E6%A0%BCid%20%0D%0A%7D%20%0D%0Afunction%20insertrow1()%20%2F%2F%E5%A2%9E%E5%8A%A0%E7%9A%84%E4%B8%80%E8%A1%8C%E6%96%B9%E6%B3%951%20%0D%0A%7B%20%0D%0Avar%20newnode%20%3D%20document.getElementById('yltable').lastChild.cloneNode(true)%3B%20%0D%0Adocument.getElementById('yltable').appendChild(newnode)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20insertrow2()%20%2F%2F%E5%A2%9E%E5%8A%A0%E7%9A%84%E4%B8%80%E8%A1%8C%E6%96%B9%E6%B3%952%20%0D%0A%7B%20%0D%0AnewRow%3Ddocument.all.yltable.insertRow(-1)%3B%20%0D%0Avar%20j_1%20%3D%20document.all.yltable.rows.length%3B%20%0D%0Anewcell%3DnewRow.insertCell()%3B%20%0D%0AnewRow.bgColor%3D'%23FFFFFF'%3B%20%0D%0Anewcell.align%3D'center'%3B%20%0D%0Anewcell.innerHTML%3D%22%22%2Bj_1%2B%22%22%3B%20%0D%0A%0D%0A%0D%0Anewcell%3DnewRow.insertCell()%20%3B%20%0D%0AnewRow.bgColor%3D'%23FFFFFF'%3B%20%0D%0A%0D%0Anewcell.align%3D'center'%3B%20%0D%0Anewcell.innerHTML%3D%22%3Cinput%20type%3D'text'%20name%3D'ylText%22%2Bj_1%2B%22'%20%2F%3E%22%3B%20%0D%0A%0D%0A%0D%0Anewcell%3DnewRow.insertCell()%20%3B%20%0D%0AnewRow.bgColor%3D'%23FFFFFF'%3B%20%0D%0A%0D%0Anewcell.align%3D'center'%3B%20%0D%0A%0D%0Anewcell.innerHTML%3D'%3Cinput%20name%3D%22button3%22%20type%3D%22button%22%20onClick%3D%22delrow1()%22%20value%3D%22%E5%88%A0%E9%99%A41%22%3E%26nbsp%3B%3Cinput%20name%3D%22button3%22%20type%3D%22button%22%20onClick%3D%22delrow2()%22%20value%3D%22%E5%88%A0%E9%99%A42%22%3E'%3B%20%0D%0A%0D%0Adocument.all.yltable.focus()%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0Afunction%20inserttable()%20%0D%0A%7B%20%0D%0Avar%20newnode%20%3D%20document.getElementById('yltable').cloneNode(true)%3B%20%0D%0Adocument.getElementById('ylform').appendChild(newnode)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</HEAD> 
<BODY> 
<form name="ylform" id="ylform"> 
<center> 
<input name="button" type="button" onClick="inserttable()" value="增加表格"> 
  <input name="button2" type="button" onClick="insertrow1()" value="增加一行1"> 
  
<input name="button22" type="button" onClick="insertrow2()" value="增加一行2"> 
</center> 
<table border="1" align="center" width="50%" id="yltable"> 
<TBODY id=yl1> 
<tr> 
<td width="30%" height="22"><div align="center">1</div></td> 
<td width="40%"> 
<div align="center"> 
<input name="textfield" type="text" value="yl"> 
</div></td> 
<td width="30%"><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
<TBODY id=yl2> 
<tr> 
<td><div align="center">2</div></td> 
<td><div align="center"> 
<input name="textfield2" type="text" value="yanleigis"> 
</div></td> 
<td><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
<TBODY id=yl3> 
<tr> 
<td ><div align="center">3</div></td> 
<td ><div align="center"> 
<input name="textfield22" type="text" value="Landgis@126.com"> 
</div></td> 
<td ><div align="center"> 
<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
</table> 
<center> 
</center> 
</form> 
</BODY> 
</HTML>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程