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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 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
PHP安装全攻略:APACHE
2006/10/09 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
用Python编程实现语音控制电脑
2014/04/01 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
python解析基于xml格式的日志文件
2017/02/25 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
建筑个人求职信范文
2014/01/25 职场文书
购房意向书
2014/04/01 职场文书
董事长助理工作职责
2014/06/08 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS