用js动态添加form的行数

最新推荐文章于 2024-02-27 22:01:19 发布

原创最新推荐文章于 2024-02-27 22:01:19 发布 · 1.5k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #table #button #function #jsp

本文介绍了一种使用JavaScript动态向HTML表格中添加行的方法。通过克隆现有的表格行并替换特定的内容来实现新行的创建与追加。该方法适用于需要动态扩展表格数据的网页应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript:

<script type="text/javascript">
  function add(){
   var oTbody = document.getElementById("tbd");

   var newIndex = document.getElementById("tbd").rows.length;

   var oTrNew = document.createElement("TR");


   var oTr = document.getElementById("tr0").cloneNode(true);

   for(var m=0;m<oTr.childNodes.length;m++){

    var oTd = oTr.childNodes[m].cloneNode(true);
    var ohtml = oTd.innerHTML;

    var nhtml = ohtml.replace(/-0-/g,newIndex);

    oTd.innerHTML = nhtml;

    oTrNew.appendChild(oTd);
   }
   oTbody.appendChild(oTrNew);
  }
</script>

jsp:

<body>
    <center>
    <form>
      <table>
       <tr>
        <th>用户名</th>
        <th>昵称</th>
       </tr>
       <tbody id="tbd">
        <tr id="tr0">
         <td><input name="user"></td>
         <td><input name="niki"></td>
        </tr>
       </tbody>
      </table>
      <table>
       <tr><td><input type="button" onclick="add();" value="添加"></td></tr>
      </table>
    </form>
    </center>
</body>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。