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=‘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>
时间: 2024-10-10 12:14:40

js动态给table添加行(tr)的相关文章

js动态添加table 数据tr td

成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Table      概要代码如下: Jsp页面[javascript]//动态获取主题数据 function getzts(){     parentId = document.getElementById("bselect1").value;     if(parentId!=""){     

JS动态创建table

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } table{ width: 500px; border-color: chartreuse; border-collapse: collapse; } ta

js在table指定tr行上或底下添加tr行

js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementById("tb1");             var newTr = tb.insertRow(trIndex);//添加新行,trIndex就是要添加的位置             var newTd1 = newTr.insertCell();             newTd1.

miniUI 动态添加table - JS

1.效果展示 ↓ 2.具体代码 1 <script type="text/javascript"> 2 function addRow() { 3 var form = document.getElementById("addForm"); 4 var table = document.getElementById("table_Records"); 5 var id_com = form.getElementsByTagName(&

js实现动态操作table

 本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&

Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据

关于jquery实现动态添加table tr的问题我也不多说了 上面代码很多地方都有注释的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str=XXX | XXX | XXX , XXX | XXX | XXX , XXX | XXX | XXX 你也可以保存成对象类型的  我是为了方便后台的操作才这样做的 话不多说直接代码: <html> <head> <meta http-equiv="Content-Typ

js基础例子动态创建table实例

<style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collapse; font-size:20px; text-align:center; margin: 0 auto; } td{ border: 1px solid #000000; } </style> <script> window.onload=function () { //创建一个数据

使用JS动态提交多行数据

先展示个效果图吧 下面是源代码 1 <%@ page language="java" import="java.util.*,entity.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServer

JS 动态表格(添加、删除行)

用JS实现表格的增删功能,添加或删除一列: 实现结果如下图: 1)添加行: 2)删除行: 实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> a{ text-decoration: none; } .one{ margin: 0 auto;