Javascript动态添加文本框的例子

最新推荐文章于 2022-03-02 18:08:51 发布

转载最新推荐文章于 2022-03-02 18:08:51 发布 · 2.3k 阅读

asp 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript在网页上实现动态增删表格行的方法。通过点击按钮即可为表格添加新行，并且每行末尾都有一个删除按钮方便移除不再需要的数据行。此方法适用于需要用户自定义输入项数量的应用场景。

<script   language="javascript">                                   
  function   add()                                   
  {   
        option   =   new   Array();   
        proportion   =   new   Array();                           
        str='<table>';   
        str=str+'<tr   align=center   valign=middle   bgcolor=#FFFFFF>';   
        str=str+'<td   width="100%"   height="25"><input   type="text"   name=proportion></td>';   
        str=str+'<td   width="100%"   height="25"><input   type="button"   name=del   onclick=""   value="删除"></td>';   
        str=str+'</tr></table>';   
        window.upid.innerHTML+=str+'';   
  }                                   
  </script>   
  <html>   
  <head>   
  <title>Untitled   Document</title>   
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">   
  </head>     
  <body>       
  <form   name="myform"   onsubmit="javascript:return   check()">       
        <table>       
                <tr>           
                        <td>     
                                <input   name="Submit2"   type="button"   onclick="javascript:add()"   value="增加">       
                        </td>           
                </tr>           
                <tr>               
                        <td>           
                        <div   id="upid"></div>       
                        </td>           
                </tr>     
        </table>                                   
  </form>                                   
  </body>                                   
  </html>