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

<html>

<head>

<title> new document </title>

<meta charset="utf-8"/>

<meta name="generator" content="editplus">

<meta name="author" content="">

<meta name="keywords" content="">

<meta name="description" content="">

</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">&nbsp;</td>

              </tr>

        </table>

   </div>

   <div>

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

        <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />

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

   </div>

</body>

</html>
javascript
<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='javascript:;' onclick=\"DeleteSignRow('SignItem" + 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>

js动态给table添加行(tr)的更多相关文章

  1. js动态添加table 数据tr td

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

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

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

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

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

  4. js 动态添加Table tr，选中与不选中checkbox行数NO的变化

    首次加载进入页面,如图: 注:Table是在js中拼接字符串循环动态添加的(拼接字符串,详见之前随笔) 点击Line2 checkbox后,效果如图: 实现的效果就是: 点击checkbox — 显示 ...

  5. JS动态创建table

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. js 动态添加表单 table tr

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  8. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  9. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

随机推荐

  1. vm安装不上vmtools

    vm的一些仿真机的配置项 isolation.tools.getPtrLocation.disable = “TRUE”isolation.tools.setPtrLocation.disable = ...

  2. Sicily 1129. ISBN

    题目地址:1129. ISBN 思路: 这道题比较简单,只要看懂题目就应该可以了.那就解释下题目好了,题目意思是按照权值计算这10个数字和,依据这个和计算还差多少可以对11整除,若还差10,那么在这个 ...

  3. 对libssh的golang 封装 ssh2go

    ssh2go 是对libssh的go语言绑定.libssh作为ssh的实现库,支持SSHv2和SSHv1的客户.服务端实现,通过libssh你可以远程执行程序.拷贝文件等等. ssh2go不像其他go ...

  4. 走FILTER效率高的2种情况

    FILTER的适用范围: 1. 主表返回的记录数较少 2.子查询返回记录数较小 下面做实验证明: select department_name from hr.dept_1 dept where de ...

  5. COJ WZJ的数据结构（负十八）splay_tree的天堂

    WZJ的数据结构(负十八) 难度级别:E: 运行时间限制:100000ms: 运行空间限制:700KB: 代码长度限制:2000000B 试题描述 对于前一段样例: 输入 输入文件的第1行包含两个数N ...

  6. Red Gate - SQL Source Control实现对SQL SERVER 的源代码控制

    原文地址:http://bbs.csdn.net/topics/350165431 SQL Server 一直没有一款很好的源码控制器,之前自己曾尝试自己写一个,将所有的 脚本 自动生成到某一目录下, ...

  7. 有关autoresizingMask属性遇到的一个小问题

    前言:在讲述这个小问题之前,我们有必要先了解一下UIViewAutoresizing的有关属性概念和使用详解. 参考:自动布局之autoresizingMask使用详解(Storyboard& ...

  8. memcached学习——分布式算法（Consistant hash + 虚拟节点）（三）

    1.取余算法 优点:数据分布均匀缺点:当服务器动态的添加.删除节点或者某台server down掉,会导致命中率超大幅度下降,甚至导致服务不可用 2.Consistant Hash算法:一致性哈希算法 ...

  9. cnBlogs_代码着色

    一个程序员当然希望写出来的代码不仅质量上好,而且看上去也很好.以前在网络上看见别人写的代码,着色以及背景都好极了,很是羡慕,但就是不知道如何设置 --------------------------- ...

  10. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...