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. 浅谈 “空指针、野指针、void*”

            Author: JW. Zhou Date: 2014/7/2 一.空指针(0/NULL) 返回NULL和返回0是完全等价的,因为NULL和0都表示空指针,换句话说:空指针是什么,就是 ...

  2. 無心插柳的Linux學習者代言人——蔡德明

    誰是「蔡德明」恐怕沒有多少人知道,不過提到「鳥哥」這個稱號,在臺灣的Linux社群幾乎是無人不知無人不曉,蔡德明正是鳥哥的本名.鳥哥究竟多有名? 如果你是有意學習Linux的初學者,卻不知如何下手,1 ...

  3. android 适配器simpleadapter和baseadapter区别

    android 适配器 simpleadapter 和 baseadapter 设计网络程序或者数据处理显示程序的时候,常常会使用 simpleadapter 和baseadapter 来实现. ad ...

  4. 30种IT技能让你年薪过10万美元！

    科技行业的高薪岗位向来不少,但在不断变化的职场中,热门技能却随时在变:今天的热门技术,明天可能就会过时.美国求职网站 Dice.com 最近发布了 2015 年薪酬报告,通过对 23,470 位 IT ...

  5. poj2114 Boatherds

    Description Boatherds Inc. is a sailing company operating in the country of Trabantustan and offerin ...

  6. HDU4432 Sum of Divisors

    涉及知识点: 1. 进制转换. 2. 找因子时注意可以降低复杂度. Sum of divisors Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  7. httpd与tomcat基于mod_jk整合

    搞定在前面述, httpd与tomcat整合方式 当前已知的有 ajp_proxy,mod_jk.so jk connecteor连接器下载地址 http://archive.apache.org/d ...

  8. Hadoop分布式文件系统HDFS详解

    Hadoop分布式文件系统即Hadoop Distributed FileSystem.        当数据集的大小超过一台独立的物理计算机的存储能力时,就有必要对它进行分区(Partition)并 ...

  9. java中文件操作的工具类

    代码: package com.lky.pojo; import java.io.BufferedReader; import java.io.BufferedWriter; import java. ...

  10. awr报告基本操作

    1.查看当前的AWR保存策略.设置:快照间隔.保存时间. SQL> col SNAP_INTERVAL format a20    SQL> col RETENTION format a2 ...