• js动态给table添加行(tr)


    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='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>
  • 相关阅读:
    5-python基础—获取某个目录下的文件列表(适用于任何系统)
    Automated, Self-Service Provisioning of VMs Using HyperForm (Part 1) (使用HyperForm自动配置虚拟机(第1部分)
    CloudStack Support in Apache libcloud(Apache libcloud中对CloudStack支持)
    Deploying MicroProfile-Based Java Apps to Bluemix(将基于MicroProfile的Java应用程序部署到Bluemix)
    Adding Persistent Storage to Red Hat CDK Kit 3.0 (在Red Hat CDK Kit 3.0添加永久性存储)
    Carve Your Laptop Into VMs Using Vagrant(使用Vagran把您笔记本电脑刻录成虚拟机)
    使用Python生成一张用于登陆验证的字符图片
    Jupyter notebook的安装方法
    Ubuntu16.04使用Anaconda5搭建TensorFlow使用环境 图文详细教程
    不同时区的换算
  • 原文地址:https://www.cnblogs.com/phpfensi/p/3949519.html
Copyright © 2020-2023  润新知