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
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
随机推荐
- Laravel的目录结构分析
根目录结构/app/bootstrap/public/vendorartisancomposer.jsonserver.php 1./app整个Laravel 目录中最需要我们注意的地方,包含设置(c ...
- requestFeature() must be called before adding content产生原因和解决办法
03-24 01:07:31.504 2957-2957/com.santai.jrj E/AndroidRuntime: FATAL EXCEPTION: main Process: com.san ...
- HTML DOM 基础知识,成为javascript晋级高手的必备手册
一.DOM 简介,什么是 DOM? 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口. 标记语言,也称置标语言,是一种将文本( ...
- SQL Server 中断开连接到指定数据库的所有连接
常用的情形是在部署测试数据库时需要通过SQL代码自动重新创建数据库,在删除的时候往往会发生错误,错误信息一般会指出目前有用户连接到这个数据库上,因此不能删除. 实现的方式是通过查询指定数据库中活跃的 ...
- 当前Azure中国可使用的虚拟机的Size列表
Standard_A0,Standard_A1,Standard_A2,Standard_A3,Standard_A5,Standard_A4,Standard_A6,Standard_A7, Bas ...
- 转:nginx基础概念(keepalive、pipe)
keapalive 当然,在nginx中,对于http1.0与http1.1也是支持长连接的.什么是长连接呢?我们知道,http请求是基于TCP协议之上的,那么,当客户端在发起请求前,需要先与服务端建 ...
- iframe 与 frame 区别
1.iframe iframe主要来内联一个外联的页面,如: <!DOCTYPE html> <html lang="zh"> <head> & ...
- window批处理杀死指定端口进程
@echo off setlocal enabledelayedexpansion set /p port=请输入端口号: for /f "tokens=1-5" %%a in ( ...
- Leveldb 使用说明文档
Leveldb 使用说明文档 原作者:Jeff Dean, Sanjay Ghemawat 翻译:乌合之众solym@sohu.com 英文原文地址https://rawgit.com/google/ ...
- CentOS7 通过代理上网
1.修改/etc/profile,增加以下内容: http_proxy=http://[代理地址]:[代理地址的端口]/ https_proxy=http://[代理地址]:[代理地址的端口]/ ex ...