Js实现动态添加删除Table行示例


Posted in Javascript onApril 14, 2014

最近做项目遇到要动态添加、删除表格行的操作,实现如下

html代码

<table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> 
<tr > 
<td colspan="8" bgcolor="#96E0E2" style="height:30px;" ><h3 style="text-align:center; margin:0;">主要学习简历</h3></td> 
</tr> 
<tr id="tr1"> 
<td class="tdStyle2">起讫时间 </td> <td class="tdStyle2">毕业院校</td> 
<td class="tdStyle2">所学专业</td> 
<td class="tdStyle2">学制</td> 
<td class="tdStyle2">学位</td> 
<td class="tdStyle2">学习方式</td> 
<td class="tdStyle2">文化程度</td> 
<td class="tdStyle2"> 
<input type="button" name="LearnAdd" value="添加" onclick="LearnAddSignRow()" /> 
<input name='LearnTRLastIndex' type='hidden' id='LearnTRLastIndex' value="1" /> 
</td> 
</tr> 
</table>

javascript代码:
<script language="javascript" type="text/javascript">// Example: obj = findObj("image1"); function findObj(theObj, theDoc) 
{ 
var p, i, foundObj; 
if(!theDoc) theDoc = document; 
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) 
{ 
theDoc = parent.frames[theObj.substring(p+1)].document; 
theObj = theObj.substring(0,p); 
} 
if(!(foundObj = theDoc[theObj]) && theDoc.all) 
foundObj = theDoc.all[theObj]; 
for (i=0; !foundObj && i < theDoc.forms.length; i++) 
foundObj = theDoc.forms[i][theObj]; 
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) 
foundObj = findObj(theObj,theDoc.layers[i].document); 
if(!foundObj && document.getElementById) 
foundObj = document.getElementById(theObj); 
return foundObj; 
} 

//添加一行学习简历 
function LearnAddSignRow(){ //读取最后一行的行号,存放在LearnTRLastIndex文本框中 
var LearnTRLastIndex = findObj("LearnTRLastIndex",document); 
var rowID = parseInt(LearnTRLastIndex.value); 
var signFrame = findObj("LearnInfoItem",document); 
//添加行 
var newTR = signFrame.insertRow(signFrame.rows.length); 
newTR.id = "LearnItem" + rowID; 
//添加列:起讫时间 
var newNameTD=newTR.insertCell(0); 
//添加列内容 
newNameTD.innerHTML = "<input name='txtLearnStartDate" + rowID + "' id='txtLearnStartDate" + rowID + "' type='text' class='inputStyle' />"; 
//添加列:毕业院校 
var newNameTD=newTR.insertCell(1); 
//添加列内容 
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' class='inputStyle' />"; 
//添加列:所学专业 
var newEmailTD=newTR.insertCell(2); 
//添加列内容 
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' class='inputStyle' />"; 
//添加列:学制 
var newTelTD=newTR.insertCell(3); 
//添加列内容 
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' class='inputStyle' />"; 
//添加列:学位 
var newMobileTD=newTR.insertCell(4); 
//添加列内容 
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />"; 
//添加列:学习方式 
var newMobileTD=newTR.insertCell(5); 
//添加列内容 
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' class='inputStyle' />"; 
//添加列:文化程度 
var newCompanyTD=newTR.insertCell(6); 
//添加列内容 
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' class='inputStyle' />"; 

//添加列:删除按钮 
var newDeleteTD=newTR.insertCell(7); 
//添加列内容 
newDeleteTD.innerHTML = "<div align='center'><input id='txtDel" + rowID + "' type='button' value='删除' onclick=\"LearnDeleteRow('LearnItem" + rowID + "')\" class='inputStyle' /></div>"; 
//将行号推进下一行 
LearnTRLastIndex.value = (rowID + 1).toString() ; 
} 
//删除指定行 
function LearnDeleteRow(rowid){ 
var signFrame = findObj("LearnInfoItem",document); 
var signItem = findObj(rowid,document); 
//获取将要删除的行的Index 
var rowIndex = signItem.rowIndex; 
//删除指定Index的行 
signFrame.deleteRow(rowIndex); 
} 
} 
</script>

实现效果:
Js实现动态添加删除Table行示例
Javascript 相关文章推荐
javascript时区函数介绍
Sep 14 Javascript
jquery ui resize 中border-box的bug修正
Apr 26 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
Mac下安装vue
Apr 11 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 #Javascript
PHP开发者必须掌握的6个关键字
Apr 14 #Javascript
javascript中的括号()用法小结
Apr 14 #Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 #Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 #Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 #Javascript
javascript对JSON数据排序的3个例子
Apr 12 #Javascript
You might like
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
php单例模式的简单实现方法
2016/06/10 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
javascript的几种写法总结
2016/09/30 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python排序算法实例代码
2017/08/10 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
家教广告词
2014/03/19 职场文书
银行自荐信范文
2015/03/25 职场文书
《月光曲》教学反思
2016/02/16 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
总结Python连接CS2000的详细步骤
2021/06/23 Python