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 &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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 不同编码下的字符串长度区分
2009/09/26 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
Json解析的方法小结
2016/06/22 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
js基于canvas实现时钟组件
2021/02/07 Javascript
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
详解python数据结构和算法
2019/04/18 Python
python设置随机种子实例讲解
2019/09/12 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
成品仓管员岗位职责
2013/12/11 职场文书
认识深刻的检讨书
2014/02/16 职场文书
艺术节主持词
2014/04/02 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python