js动态给table添加/删除tr的方法。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 <HTML>

 <HEAD>

 <TITLE>JS动态为table添加与删除tr-www.jbxue.com-脚本学堂 </TITLE>

 <META NAME="Generator" CONTENT="EditPlus">

 <META NAME="Author" CONTENT="">

 <META NAME="Keywords" CONTENT="">

 <META NAME="Description" CONTENT="">

 <script language="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 AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中

 var txtTRLastIndex = findObj("txtTRLastIndex",document);

 var rowID = parseInt(txtTRLastIndex.value);

 var signFrame = findObj("SignFrame",document);

 //添加行

 var newTR = signFrame.insertRow(signFrame.rows.length);

 newTR.id = "SignItem" + rowID;

 //添加列:序号

 var newNameTD=newTR.insertCell(0);

 //添加列内容

 newNameTD.innerHTML = newTR.rowIndex.toString();

 //添加列:姓名

 var newNameTD=newTR.insertCell(1);

 //添加列内容

 newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";

 //添加列:电子邮箱

 var newEmailTD=newTR.insertCell(2);

 //添加列内容

 newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";

 //添加列:电话

 var newTelTD=newTR.insertCell(3);

 //添加列内容

 newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";

 //添加列:手机

 var newMobileTD=newTR.insertCell(4);

 //添加列内容

 newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";

 //添加列:公司名

 var newCompanyTD=newTR.insertCell(5);

 //添加列内容

 newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";

 //添加列:删除按钮

 var newDeleteTD=newTR.insertCell(6);

 //添加列内容

 newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='#'" + rowID + "')">删除</a></div>";

 //将行号推进下一行

 txtTRLastIndex.value = (rowID + 1).toString() ;

 }

 //删除指定行

 function DeleteSignRow(rowid){

 var signFrame = findObj("SignFrame",document);

 var signItem = findObj(rowid,document);

 //获取将要删除的行的Index

 var rowIndex = signItem.rowIndex;

 //删除指定Index的行

 signFrame.deleteRow(rowIndex);

 //重新排列序号，如果没有序号，这一步省略

 for(i=rowIndex;i<signFrame.rows.length;i++){

 signFrame.rows[i].cells[0].innerHTML = i.toString();

 }

 }//清空列表

 function ClearAllSign(){

 if(confirm('确定要清空所有参与人吗？')){

 var signFrame = findObj("SignFrame",document);

 var rowscount = signFrame.rows.length;

 //循环删除行,从最后一行往前删除

 for(i=rowscount - 1;i > 0; i--){

 signFrame.deleteRow(i);

 }

 //重置最后行号为1

 var txtTRLastIndex = findObj("txtTRLastIndex",document);

 txtTRLastIndex.value = "1";

 //预添加一行

 AddSignRow();

 }

 }

 </script>

 </HEAD>

 <BODY>

 <div>

 <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">

 <tr id="trHeader">

 <td width="27" bgcolor="#96E0E2">序号</td>

 <td width="64" bgcolor="#96E0E2">用户姓名</td>

 <td width="98" bgcolor="#96E0E2">电子邮箱</td>

 <td width="92" bgcolor="#96E0E2">固定电话</td>

 <td width="86" bgcolor="#96E0E2">移动手机</td>

 <td width="153" bgcolor="#96E0E2">公司名称</td>

 <td width="57" align="center" bgcolor="#96E0E2"> </td>

 </tr>

 </table>

 </div>

 <div>

 <input type="button" name="Submit" value="添加参与人" />

 <input type="button" name="Submit2" value="清空" />

 <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />

 </div>

 </BODY>

 </HTML>

js动态给table添加/删除tr的方法的更多相关文章

  1. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  2. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

  3. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  4. js动态创建及移除div的方法

    本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  5. JS函数可以再添加属性（包括方法）

    1 前言 JS函数可以再添加属性(包括方法),这个有点有趣,记录一下. 2 代码 <!DOCTYPE html> <html> <head> <title&g ...

  6. 动态给table添加动态航

    <html> <head> <title>usually function</title> <meta http-equiv="Cont ...

  7. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  8. js动态给table添加行(tr)

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> < ...

  9. 动态插入、添加删除表格行的JS代码

    <html> <head> <title>Table对象的方法</title> <script language="JavaScript ...

随机推荐

  1. JSP的范围-作用域(web基础学习笔记五)

    JSP的范围(作用域) 在JSP页面中的对象,包括用户创建的对象如JavaBean,都有一个范围属性,这个范围也被叫做“作用域”.范围定义了在什么时间内,在哪一个JSP页面中可以访问这些对象.例如,s ...

  2. eclipse安装maven3

    maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前最新版本是 3.0.4,我用的也是这个. 首先去官网下载 Maven ...

  3. 基于apktool项目的android批量打包工具，多平台支持

    好久木有写博客了,今天有点兴致就写一下,献上一个没怎么用的批量打包工具,python实现的,虽然说现在android的批量打包有一个很好的工具可以使用gradle,这个灰常牛叉的工具和android ...

  4. Win10怎么设置点击任务栏上文件夹图标直接打开“我的电脑”？

    我们都知道Win10任务栏上的文件夹图标可以打开文件资源管理器,但是点击这个图标后打开的位置却是不固定的,有可能是库文件夹,也有可能是其他常用的位置.怎么设置点击这个图标后直接打开"此电脑& ...

  5. 设置Treeview背景色的问题1

    有没有哪位兄弟在VB中使用sendmessage对TreeView改变背景色?我现在遇到一个问题,如果把linestyle设为1 的时候,展开节点的时候root部位会 有一个下拉的白色块,如果设为1  ...

  6. Linux 指令详解 alias 设置别名（转）

    我们在使用Linux中使用较长的命令而且要经常要使用时,总是会使用别名,这里就简单的介绍一下别名alias 指令:alias设置指令的别名 语法:#  alias name='command line ...

  7. Oracle内存管理（之二）

    [深入解析--eygle] 学习笔记 1.2.2 UGA和CGA UGA(用户全局区)由用户会话数据.游标状态和索引区组成.在共享server模式下,一个共享服务进程被多个用户进程共享,此时UGA是S ...

  8. 生产服务器环境最小化安装后 Centos 6.5优化配置备忘

    生产服务器环境最小化安装后 Centos 6.5优化配置备忘 作者:Memory 发布于:2014-8-13 15:00 Wednesday 服务器 本文 centos 6.5 优化 的项有18处: ...

  9. Linux 系统使用 iso 镜像文件或光盘配置本地YUM 源的最简单方式

    1.分配光驱 选择本地的iso系统镜像文件,或者在光驱中放入系统安装盘.之后,在桌面可以看到RHEL-7.2-Server的光盘图标. 2.查看光驱挂载的位置 使用df -h 命令可以看到光驱或镜像文 ...

  10. 【LeetCode】48. Rotate Image (2 solutions)

    Rotate Image You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees ...