这是一个典型的WEB template复用的场景。
你的Template,就是你的tBodies::tr的元数据。
可以考虑使用JSP Tag,将迭代数据源,并生成HTML Table的琐碎工作,交由Tag来实现。建议参考一下display-tag的DEMO。如果应用简单,可以自己扩展javax.servlet.jsp.tagext.JspTag来实现。

解决方案 »

  1.   

    <SCRIPT>
    function fnClone(){
    /* the 'true' possible value specifies to clone
    the childNodes as well.
    */
    var oCloneNode = oList.cloneNode(true);
    /* When the cloned node is added,
    'oList' becomes a collection.
    */
    document.body.insertBefore(oCloneNode);
    }
    </SCRIPT>
    <UL ID="oList">
    <LI>List node 1
    <LI>List node 2
    <LI>List node 3
    <LI>List node 4
    </UL>
    <INPUT type="button" value="Clone List" onclick="fnClone()">
    用cloneNode  照上面的改改
      

  2.   

    楼上好深。
    我是一只javascript菜鸟,而且事情紧急。
    我是想直接在jsp页面写javascript代码调用就可以了。
    随能写写代码教教我?
      

  3.   

    2楼的我成功了,可是用到我的页面不行,看看我的代码,我是一个table下有两个label,每个label包围着一对tr,每点一次按钮就把第一个label的内容复制到第二个。
    其实就是想每点以下按钮增加一行啦。
    准备加分,谢谢。
      

  4.   


    参考:
    http://www.the6cn.com/html/20060602/20060602112811.htm
      

  5.   

    不要用label
    给每个tr一个id,直接把tr当成要copy的object
      

  6.   

    <!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html   xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />
    <title> 无??文档 </title></head>
    <body>
    <SCRIPT>
    function   fnClone(){
    /*   the   'true'   possible   value   specifies   to   clone
    the   childNodes   as   well.
    */
    var   oCloneNode   =   document.getElementById("tr1").cloneNode(true);
    /*   When   the   cloned   node   is   added,
    'oList'   becomes   a   collection.
    */
    alert(oCloneNode)
    document.getElementById("oList").childNodes[0].appendChild(oCloneNode);
    }
    </SCRIPT>
    <table   ID="oList">
    <tr ID="tr1"><td> List   node   1</td><td> <INPUT   type="button"   value="Clone   List"  > </td><td> <INPUT   type="button"   value="Clone   List"  > </td></tr></table>
    <INPUT   type="button"   value="Clone   List"   onclick="fnClone()"> 
    </body>
    </html> 
      

  7.   

    mingxuan3000 距离成功仅一步之遥。
    我是可以添加了,不过第一次加一行,第二次加2行,第三次加4行了。可以每次加一行吗?怎么改?
    谢谢
      

  8.   

    对mingxuan3000大虾的代码稍微修改一下,就可以为每个新增的行设置不同的ID。
    <html>
    <head>
    <script type="text/javascript">
    var idCounter = 1;
    function fnClone()
    {
    var oRow = document.getElementById("row1").cloneNode(true);

    document.getElementById("oTable").childNodes[0].appendChild(oRow);

    oRow.id = "row" + (++idCounter);
    }
    </script>
    </head>
    <body>
    <table border="1" id="oTable">
    <tr id="row1">
    <td>Text</td>
    <td><input type="text" value="textbox" /></td>
    <td><input type="button" value="this is button" /></td>
    </tr>
    </table>
    <input type="button" value="Clone" onclick="fnClone()" />
    </body>
    </html>
      

  9.   

    谢谢上面的大虾们。
    小弟分不多,一下就加100分了。
    既然如此,我再问多一点。像 tenderghost 那样,每行有不同的ID,那么每个单元格的里面的input value 怎么才能取到值?
      

  10.   

    <html>
    <head>
        <script type="text/javascript">
            var idCounter = 1;
            function fnClone()
            {
                var oRow = document.getElementById("row1").cloneNode(true);
                
                document.getElementById("oTable").childNodes[0].appendChild(oRow);
                
                oRow.id = "row" + (++idCounter);
            }
        </script>
    </head>
    <body>
        <table border="1" id="oTable">
            <tr id="row1">
                <td>Text</td>
                <td><input type="text" value="textbox" /></td>
                <td><input type="button" value="click me get text value" onclick="alert(this.parentNode.parentNode.childNodes[1].childNodes[0].value)"/></td>
            </tr>
        </table>
        <input type="button" value="Clone" onclick="fnClone()" />
    </body>
    </html>
    也可用 document.getElementById("textId").value
    也可给text  一个name  ,用
    document.getElementsByName("textName")[0].value如果多个name  一样,就循环document.getElementsByName("textName")
      

  11.   

    <html>
    <head>
        <script type="text/javascript">
            var idCounter = 1;
            function fnClone()
            {
                var oRow = document.getElementById("row1").cloneNode(true);
                
                document.getElementById("oTable").childNodes[0].appendChild(oRow);
                
                oRow.id = "row" + (++idCounter);
            }
    function fnget(){
      var bb=document.getElementsByName("texta")
      for(var i=0;i<bb.length;i++){
        alert(bb[i].value)
      }
    }
        </script>
    </head>
    <body>
        <table border="1" id="oTable">
            <tr id="row1">
                <td>Text</td>
                <td><input type="text" value="textbox" name="texta"/></td>
                <td><input type="button" value="click me get text value" onclick="alert(this.parentNode.parentNode.childNodes[1].childNodes[0].value)"/></td>
            </tr>
        </table>
        <input type="button" value="Clone" onclick="fnClone()" /></br>
    <input type="button" value="get text Value" onclick="fnget()" />
    </body>
    </html>
      

  12.   

    还有啊,晕。 
    表格第一列是有一个checkbox的,怎么样做到选勾的才提交呢?
      

  13.   

    页面的东西都会提交的
    你在后台取checkbox值,判断选勾没有
      

  14.   

    好,顺便问问,如果我要做个有效判断,一行的时候能判断,当用你的代码添加多行后就判断不了啦。例如text 为空 会有 alert 当每个text 都不为空才提交
      

  15.   

    function   fnget(){
        var   bb=document.getElementsByName("texta")
        for(var   i=0;i <bb.length;i++){
            alert(bb[i].value) //这里取到值了 你不会加个判断?
        }
      

  16.   

    差不多了,最后一步啦,帮忙帮到底。
    为什么我增加一行的时候,新行的内容会完全复制了上面一行的。我想新增一行空行(也就是text那些为空的)可以么。