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对select标签的控制(option选项/select)
Jan 31 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
浅析vue深复制
Jan 29 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
JavaScript 定时器详情
Nov 11 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
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
React Router基础使用
2017/01/17 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python编程argparse入门浅析
2018/02/07 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
新教师工作感言
2014/02/16 职场文书
cf战队收人广告词
2014/03/14 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
惊天动地观后感
2015/06/10 职场文书
结婚司仪主持词
2015/06/29 职场文书
法院执行局工作总结
2015/08/11 职场文书