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. MSSQL显错注入爆数字型数据的一点思考

    Title:MSSQL显错注入爆数字型数据的一点思考 --2011-02-22 15:23 MSSQL+ASP 最近在弄个站点,密码是纯数字的,convert(int,())转换出来不报错,也不知道其 ...

  2. javascript 要注意的事项

    记入一些容易出错的地方 function someClass() { this.name = null; 或 undefined } var obj = new someClass(); consol ...

  3. 五大P2P平台费用一览

    我看版上谈P2P的挺多的,正好我也投了点P2P, 今天看到一个不错的图 欢迎版上朋友讨论       -- 不忧不惧

  4. HAVING 子句 (SQL Server Compact)

    MSDN官方文献 原文地址:http://technet.microsoft.com/zh-cn/library/ms173260.aspx

  5. Java毫秒转换成日期格式

    import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.uti ...

  6. (转)ObjC利用正则表达式抓取网页内容（网络爬虫）

    转自:http://www.cocoachina.com/bbs/read.php?tid=103813 *****boy]原创 2012年5月20日 在开发项目的过程,很多情况下我们需要利用互联网上 ...

  7. Problem with generating association inside dbml file for LINQ to SQL

    Question: I have created a dbml file in my project, and then dragged two tables from a database into ...

  8. Horizontal,vertical,Input_Mouse,Input_Key

    鼠标获取 using UnityEngine; using System.Collections; public class Input_Mouse : MonoBehaviour { void Up ...

  9. iOS中block实现的探究

    [0. Brief introduction of block] Block是iOS4.0+ 和Mac OS X 10.6+ 引进的对C语言的扩展,用来实现匿名函数的特性. 用维基百科的话来说,Blo ...

  10. NYOJ 16 矩形嵌套（动态规划）

    矩形嵌套 时间限制: 3000 ms  |  内存限制: 65535 KB 难度: 4   描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅 ...