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. Solr Dataimport配置

    参考资料: https://cwiki.apache.org/confluence/display/solr/Uploading+Structured+Data+Store+Data+with+the ...

  2. 指定Action、Category调用系统Activity

    1.Intent对象详解 Android的应用程序包含三种重要组件:Activity.Service.BroadcastReceiver,应用程序采用一致的方式来启动它们----都是依靠Intent来 ...

  3. uva10003 Cutting Sticks

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  4. 51单片机C语言学习笔记4：keil C51绝对地址访问

    在利用keil进行8051单片机编程的时,常常需要进行绝对地址进行访问.特别是对硬件操作,如DA AD 采样 ,LCD 液晶操作,打印操作.等等.C51提供了三种访问绝对地址的方法: 1. 绝对宏:  ...

  5. Qt编程之Qt样例表（QSS）

    For a long time, Qt has allowed you to decorate your GUIs with CSS’ish style sheets. Inspired by the ...

  6. css属性之box-shadow

    box-shadow 属性向框添加一个或多个阴影. <!DOCTYPE html> <html> <head> <style> div { width: ...

  7. VS快捷键大全（转）

    相信.Net开发人员都想能够熟记各种VS快捷键以提高平时开发的效率,但苦于记忆能力太差而快捷键又特别多,特别烦,所以作罢! 下面我将简单介绍一下我记忆VS快捷键的一些方法,希望对大家有所帮助. 1.窗 ...

  8. 算法导论(第三版)Exercises2.3(归并排序、二分查找、计算集合中是否有和为X的2个元素)

    2.3-1: 3 9 26 38 41 49 52 59 3 26 41 52   9 38 49 57 3 41   52 26   38 57   9 49 3   41  52  26  38  ...

  9. Laravel5.2 下使用Form

    laravel到了5.1.*以上版本,便没有了illuminate/html类库的支持, 我试着把illuminate/html类库加入了laravel5.2,依然没有用, 但是laravelcoll ...

  10. 查询死锁和处理死锁(SqlServer)

    -------------------查询死锁,极其引起的原因-------------------------------use master go create procedure sp_who_ ...