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需再刷新一下页面才能执行]

您可能感兴趣的文章:

Node.js实战建立简单的Web服务器
本章我们同样通过实战的演练，利用Node.js建立一个简单的Web服务器
2012-03-03
uniapp单页面实现页面切换的使用示例
本文主要介绍了uniapp单页面实现页面切换的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-09-09
跟我学习javascript的异步脚本加载
跟我学习javascript的异步脚本加载，告诉大家如何使自己的站点更快捷，以及最简单的方法利用什么样的工具达到预期效果，想一探究竟的朋友可以参考一下这篇文章。
2015-11-11
微信小程序自定义消息提示框
这篇文章主要介绍了微信小程序自定义消息提示框的相关资料,wx.showToast(OBJECT)接口调用，实现改功能，需要的朋友可以参考下
2017-08-08
JavaScript架构前端监控搭建过程步骤
这篇文章主要为大家介绍了JavaScript架构前端监控搭建过程步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
使用js获取QueryString的方法小结
从网上看到一些使用js获取QueryString的方法，但用起来不是很理想，所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。
2010-02-02
自己实现string的substring方法人民币小写转大写，数字反转，正则优化
这是最近碰到的几个题目，简单地写一下我自己的方案，在此分享给大家，也希望能看到大家的方案
2012-09-09
js中关于promise的用法解读
这篇文章主要介绍了js中关于promise的用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
在一般处理程序（ashx）中弹出js提示语
这篇文章主要介绍了在一般处理程序（ashx）中弹出js提示语的相关资料,需要的朋友可以参考下
2017-08-08
微信公众平台API错误代码41002的问题解决办法
今天在研究微信公众号接口问题,下面这篇文章主要给大家介绍了关于微信公众平台API错误代码41002问题的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具