如何js实现克隆行

<table border="1" id="table1">
     <thead>
         <tr id="row1" name="row1">
          <td></td>
          <%
     for(int i=0;i<list.size();i++)
     {
     TemplatesInfo tempInfo=(TemplatesInfo)list.get(i);
    
     %>
     <td align="center"><input type="hidden" id="column<%=i %>" value="<%=tempInfo.getTemplateCoulmnName() %>"></td>
     <%
     }
     %>
     <td></td>
     </tr>
         </tr>
     <tr>
     <th align="center">序号</th>
     <%
     for(int i=0;i<list.size();i++)
     {
     TemplatesInfo tempInfo=(TemplatesInfo)list.get(i);
    
     %>
     <th align="center"><%=tempInfo.getTemplateCoulmnName() %></th>
     <%
     }
     %>
     <th><a href="javascript:void(0)" onclick="addRow()">增行</a>&nbsp;&nbsp;</th>
     </tr>
     <%
     if(proNumberList==null||proNumberList.size()==0)
     {
     return;
     }
     for(int i=0;i<proNumberList.size();i++){
     String proNumber=proNumberList.get(i).toString();
     %>
     <tr>
     <td align="center"><%=i+1 %></td>
     <%
     List proColumnInfoList=pis.findProjectByProNumber(proNumber);
     for(int j=0;j<proColumnInfoList.size();j++){
     String columnInfo=proColumnInfoList.get(j).toString();
     %>
     <td align="center"><input type="text" id="columnInfo" value="<%=columnInfo %>"></td>
     <%
     }
     %>
     </tr>
     <%
     }
     %>
     </thead>
    </table>
表的结构全是从数据库读取的，列不是固定的。
想要克隆第一行作为添加行的样本。如何添加。求大神编码

解决方案 »

  1.   

    <!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=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <table width="500" border="1" id="demo">
      <thead>
        <tr>
          <th>字段1</th>
          <th>字段2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>R1C1</td>
          <td>R1C2</td>
        </tr>
        <tr>
          <td>R2C1</td>
          <td>R2C2</td>
        </tr>
      </tbody>
    </table>
    <input type="button" id="btnCloneRow" value="克隆第1行并添加到表格末尾" />
    <script type="text/javascript">
    document.getElementById('btnCloneRow').onclick = function() {
    var oTbody = document.getElementById('demo').getElementsByTagName('tbody')[0];
    var oRow1 = oTbody.getElementsByTagName('tr')[0];
    oTbody.appendChild(oRow1.cloneNode(true));
    }
    </script>
    </body>
    </html>