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. 可用版本的host

    http://blog.csdn.net/ljphhj/article/details/11939591 http://my.oschina.net/lvkun0223/blog/282356 两者的 ...

  2. 10 001st prime number

    这真是一个耗CPU的运算,怪不得现在因式分解和素数查找现在都用于加密运算. By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13 ...

  3. Qt之模型/视图（自定义按钮）（重绘QStyleOptionButton）

    http://blog.csdn.net/liang19890820/article/details/50974059#comments

  4. QQ音乐的请求

    CEF 3.2357.1291.g47e6d4bChromium 43.0.2357.134OS WindowsWebKit 537.36JavaScript 4.3.61.38Flash User ...

  5. VLC命令行的应用

    vlc -vvv rtsp://218.204.223.237:554/live/1/0547424F573B085C/gsfp90ef4k0a6iap.sdp --sout #transcode{v ...

  6. 【HDOJ】1057 A New Growth Industry

    纯粹的模拟题目. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 20 # ...

  7. 解决：安装SQl 2008为SQL Server代理服务提供的凭据无效

    Q: 在Windows Server 2008安装SQL Server 2008出现的问题: 安装时在“服务器配置”环节出现以下问题:为sql server代理服务提供的凭据无效为sql server ...

  8. 【转】C++动态创建二维数组,二维数组指针

    原作者博客:蒋国宝的IT技术博客 今天完成一道题目需要自己用指针创建一个二维的数组,不得不承认指针的确是恶心. int **result; ; ; result = new int*[row]; ; ...

  9. 浏览器开发 IE webkit chrome浏览器定制

    FAQ:制作自己的浏览器有何意义?1.浏览器按照您的需求命名,可自定义LOGO,对您的产品或者公司都有推广作用.2.在帮助一栏的主页以及软件安装的网页链接都可以设为您网站的链接. 3.可将首页设置为您 ...

  10. hdu 2256 Problem of Precision

    点击打开hdu 2256 思路: 矩阵快速幂 分析: 1 题目要求的是(sqrt(2)+sqrt(3))^2n %1024向下取整的值 3 这里很多人会直接认为结果等于(an+bn*sqrt(6))% ...