Js实现动态添加删除Table行示例
<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行示例的更多相关文章
- C# ASP 动态添加Html Table行
用JS放法实现以下效果: 前端文件Questionnaire23.aspx: <%@ Page Title="题目" Language="C#" Mast ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- js实现网页收藏功能,动态添加删除网址
<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...
- 编辑 Ext 表格(一)——— 动态添加删除行列
一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行 gridS ...
- jquery 删除table行,该如何解决
query 删除table行< table > < tbody > < tr > < td > 这行原来就有 </ td > < ...
- jquery 无刷新添加/删除 input行 实时计算购物车价格
jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
随机推荐
- SuperMap开发入门4——保存的坑
工作空间.地图等的打开.保存.删除是最基本的操作,可我居然卡在保存工作空间的问题上了. 功能需求 需求很简单:打开工作空间中的某一地图,缩放一下,保存地图.(下次打开时,已经缩放到上次修改过的地方) ...
- scala中Option和Some
Option的解释: Represents optional values. Instances of Option are either an instance of scala.Some or t ...
- SHELL 循环获取日期以及FOR使用
;i<=;i++)); do PYTHONPATH=lib/ bin/cupid -c conf/config.cfg -u http://shop33220311.taobao.com/?tb ...
- MySql8.0数据库链接报错The driver has not received any packets from the server
1.我使用MySql数据库8.0版本,然后驱动改成了 jdbc.driver=com.mysql.cj.jdbc.Driver jdbc.url=jdbc:mysql://127.0.0.1:3306 ...
- pip安装psutil模块时候报错:yum install python-devel mysql-devel zlib-devel openssl-devel
yum install python-devel mysql-devel zlib-devel openssl-devel [root@localhost software]# pip install ...
- Keepalived系列一:安装Keepalived
1:简介 它是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障.一个WEB服务至少会有2台服务器运行Keepalived,一台为主服务器(MASTER),一台为备份服务器(B ...
- http协议版本历史
1.http 0.9 2.http 1.0 3. http 1.1 4.http 2.0 推送:主动发送js.css推送到浏览器. 二进制流:可以并行发送数据. 2019.3.18补充: (1)htt ...
- Linux内存分配机制之伙伴系统和SLAB
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6539590.html 内核内存管理的一项重要工作就是如何在频繁申请释放内存的情况下,避免碎片的产生.这就要求 ...
- JVM的结构
参考:http://blog.csdn.net/tonytfjing/article/details/44278233 JVM的结构 一般认为,JVM分为四大部分: 1.类加载器(ClassL ...
- Mysql查询优化之 触发器加中间表 方法优化count()统计大数据量总数问题
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6138288.html 在上一篇博文我们提到,分页有三种方法.其中,第三种是我们最常用的.然而,在实际应用过程中 ...