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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
用JS实现一个页面多个css样式实现
May 29 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
Javascript中replace()小结
Sep 30 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
Vue-component全局注册实例
Sep 06 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
详解如何在Vue项目中导出Excel
Apr 19 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP实现微信对账单处理
2018/10/01 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
python代码能做成软件吗
2020/07/24 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
大学生毕业的自我评价分享
2014/01/02 职场文书
产品推广策划方案
2014/05/10 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
党员带头倡议书
2015/04/29 职场文书
走进科学观后感
2015/06/18 职场文书
运动会新闻稿
2015/07/17 职场文书
Oracle笔记
2021/04/05 Oracle
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
Redis集群的关闭与重启操作
2021/07/07 Redis