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

更新时间：2008年10月25日 19:14:56 投稿：mdxy-dxy

非常漂亮的js操作table行代码函数。比较方便

<HTML> 
<TITLE>Form Object example</TITLE> 
<HEAD> 
<script language="javascript"> 
function delrow1() 
{ 
var oElement=event.srcElement; 
while(oElement.tagName!="TR") 
{ 
oElement=oElement.parentElement; 
} 
var oTBody=oElement.parentElement; 
oTBody.removeChild(oElement) 
}

function delrow2()//刪除当前行 
{ 
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex; 
document.all.yltable.deleteRow(currRowIndex);//table10--表格id 
} 
function insertrow1() //增加的一行方法1 
{ 
var newnode = document.getElementById('yltable').lastChild.cloneNode(true); 
document.getElementById('yltable').appendChild(newnode); 
}

function insertrow2() //增加的一行方法2 
{ 
newRow=document.all.yltable.insertRow(-1); 
var j_1 = document.all.yltable.rows.length; 
newcell=newRow.insertCell(); 
newRow.bgColor='#FFFFFF'; 
newcell.align='center'; 
newcell.innerHTML=""+j_1+"";

newcell=newRow.insertCell() ; 
newRow.bgColor='#FFFFFF';

newcell.align='center'; 
newcell.innerHTML="<input type='text' name='ylText"+j_1+"' />";

newcell=newRow.insertCell() ; 
newRow.bgColor='#FFFFFF';

newcell.align='center';

newcell.innerHTML='<input name="button3" type="button" onClick="delrow1()" value="删除1">&nbsp;<input name="button3" type="button" onClick="delrow2()" value="删除2">';

document.all.yltable.focus();

}

function inserttable() 
{ 
var newnode = document.getElementById('yltable').cloneNode(true); 
document.getElementById('ylform').appendChild(newnode); 
} 
</script> 
</HEAD> 
<BODY> 
<form name="ylform" id="ylform"> 
<center> 
<input name="button" type="button" onClick="inserttable()" value="增加表格"> 
&nbsp; <input name="button2" type="button" onClick="insertrow1()" value="增加一行1"> 
&nbsp; 
<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">&nbsp;<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">&nbsp;<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">&nbsp;<input name="button3" type="button" onClick="delrow2()" value="删除2"> 
</div></td> 
</tr> 
</TBODY> 
</table> 
<center> 
</center> 
</form> 
</BODY> 
</HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

有关JS中的0,null,undefined,[],{},'''''''''''''''',false之间的关系
这篇文章主要介绍了有关JS中的0,null,undefined,[],{},'',false之间的关系,需要的朋友可以参考下
2017-02-02
JS实现图片横向滚动效果示例代码
图片横向滚动效果，大家可能都已经很熟悉了，本文为大家介绍下使用js实现横向滚动效果，喜欢的朋友可以参考下，希望对大家有所帮助
2013-09-09
无循环 JavaScript(map、reduce、filter和find)
本文由浅入深地介绍了map、reduce、filter和find函数，如何一步一步把循环从代码中抽离掉
2017-04-04
浅谈Javascript Base64 加密解密
这篇文章主要简单介绍了Javascript Base64 加密解密的使用方法，有需要的小伙伴参考下
2014-12-12
谷歌Chrome浏览器扩展程序开发小记
本文给大家记录的是一次谷歌Chrome浏览器扩展程序的开发过程，非常的细致，有类似开发念头的小伙伴们可以来参考下
2016-01-01
当$.get返回失败后调用fail方法示例详解
这篇文章主要介绍了当$.get返回失败后，调用fail方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-12-12
原生JS实现图片懒加载(lazyload)实例
图片懒加载也是比较常见的一种性能优化的方法，本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例，这里整理了详细的代码,有需要的小伙伴可以参考下
2017-06-06
小程序开发基础之view视图容器
这篇文章主要介绍了小程序开发基础之view视图容器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
JavaScript中String对象的使用方法以及实例
这篇文章主要给大家介绍了关于JavaScript中String对象的使用方法以及实例的相关资料,文中通过实例代码介绍的非常详细,方便开发者在JavaScript开发中更好地处理字符串,需要的朋友可以参考下
2022-04-04
关于使用 jBox 对话框的提交不能弹出问题解决方法
在 ASP.NET Form 中使用 jBox 的时候，在按钮注册的客户端点击事件中，会发现不能弹出对话框问题
2012-11-11