设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 898|回复: 0

[jQuery/Js/AJAX] 基于jQuery制作动态添加表单行与删除表单行

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2015-9-16 18:20:01 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
基于jQuery制作动态添加表单行与删除表单行

演示截图: demo.png

源码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery制作动态添加表单行与删除表单行</title>
  6. </head>
  7. <body>

  8. <div style="width:720px;margin:20px auto;">

  9.     <table id="tab11" style="display: none">
  10.         <tbody>
  11.             <tr>
  12.                 <td height="30" align="center">
  13.                     <input type="text" name="NO" size="2" value="1" /></td>
  14.                 <td align="center">
  15.                     <input type="text" name="start_end_time" /></td>
  16.                 <td align="center">
  17.                     <input type="text" name="unit_department" /></td>
  18.                 <td align="center">
  19.                     <input type="text" name="post" /></td>
  20.                 <td>
  21.                     <input type="button" id="Button1" onClick="deltr(this)" value="删行">
  22.                 </td>
  23.             </tr>
  24.         </tbody>
  25.     </table>
  26.     <input type="button" id="btn_addtr" value="增行">
  27.     <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
  28.         <thead>
  29.             <tr>
  30.                 <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
  31.                 <td align="center" bgcolor="#CCCCCC">起止时间</td>
  32.                 <td align="center" bgcolor="#CCCCCC">单位/部门</td>
  33.                 <td align="center" bgcolor="#CCCCCC">职位</td>
  34.                 <td></td>
  35.             </tr>
  36.         </thead>
  37.         <tbody>
  38.             <tr>
  39.                 <td height="30" align="center">
  40.                     <input type="text" name="NO" size="2" value="1" /></td>
  41.                 <td align="center">
  42.                     <input type="text" name="start_end_time" /></td>
  43.                 <td align="center">
  44.                     <input type="text" name="unit_department" /></td>
  45.                 <td align="center">
  46.                     <input type="text" name="post" /></td>
  47.                 <td>
  48.                     <input type="button" id="Button2" onClick="deltr(this)" value="删行">
  49.                 </td>
  50.             </tr>
  51.         </tbody>
  52.     </table>

  53. </div>
  54. <script type="text/javascript" src="jquery.min.js"></script>
  55. <script type="text/javascript">
  56. $(function () {
  57.     var show_count = 20;   //要显示的条数
  58.     var count = 1;    //递增的开始值,这里是你的ID
  59.     $("#btn_addtr").click(function () {

  60.         var length = $("#dynamicTable tbody tr").length;
  61.         //alert(length);
  62.         if (length < show_count)    //点击时候,如果当前的数字小于递增结束的条件
  63.         {
  64.             $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");   //在表格后面添加一行
  65.             changeIndex();//更新行号
  66.         }
  67.     });


  68. });
  69. function changeIndex() {
  70.     var i = 1;
  71.     $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
  72.         $(this).find("input[name='NO']").val(i++);//更新行号
  73.     });
  74. }

  75. function deltr(opp) {
  76.     var length = $("#dynamicTable tbody tr").length;
  77.     //alert(length);
  78.     if (length <= 1) {
  79.         alert("至少保留一行");
  80.     } else {
  81.         $(opp).parent().parent().remove();//移除当前行
  82.         changeIndex();
  83.     }
  84. }
  85. </script>
  86. </body>
  87. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:44

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表