jquery实现表单逐条登记,一次性提交功能

jquery实现表单逐条登记,一次性提交功能

表单form的提交,大多数都是填写一条记录,就提交一次,这样就会频繁操作持久层,如果我们想一次性填写多条记录,然后再一次性提交给持久层,这样的功能你可以实现吗?下面就是这样的一个小案例。

<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

       <head>

              <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

              <scriptlanguage="JavaScript" src="js/jquery-1.3.1.js"></script>

              <title>添加用户</title>

       </head>

       <body>

              <center>

                     <br><br>

                     添加用户:<br><br>

                     姓名: <input type="text"name="name" id="name" />&nbsp;&nbsp;

                     email:<input type="text" name="email" id="email"/>&nbsp;&nbsp;

                     电话: <input type="text"name="tel" id="tel" /><br><br>

                     <buttonid="addUser">提交</button>

                     <br><br>

                     <hr>

                     <br><br>

                     <tableid="usertable" border="1" cellpadding="5"cellspacing=0>

                            <tbody>

                                   <tr>

                                          <th>姓名</th>

                                          <th>email</th>

                                          <th>电话</th>

                                          <th>&nbsp;</th>

                                   </tr>

                                   <tr>

                                          <td>Tom</td>

                                          <td>tom@tom.com</td>

                                          <td>5000</td>

                                          <td><ahref="deleteEmp?id=Tom">Delete</a></td>

                                   </tr>

                                   <tr>

                                          <td>Jerry</td>

                                          <td>jerry@sohu.com</td>

                                          <td>8000</td>

                                          <td><ahref="deleteEmp?id=Jerry">Delete</a></td>

                                   </tr>

                            </tbody>

                     </table>

              </center>

       </body>

       <scriptlanguage="JavaScript">

              $(document).ready(function(){

                     //绑定事件onclick

                     $('#addUser').click(function(){

                            //一步到位

                            varin_user_name=$('#name').val();

                            varin_user_email=$('#email').val();

                            varin_user_tel=$('#tel').val();

                            //一步到位,没有办法动态绑定事件,换一个.

              /*           $tr=$("<tr><td>"+$in_user_name

                            +"</td><td>"+$in_user_email+"</td><td>"+$in_user_tel

                            +"</td><td><ahref='#'>删除</a></td></tr>");*/

                            $tr=$("<tr></tr>");

                            $name_td=$("<td></td>");

                            $name_td.text(in_user_name);//"<td>名字</td>"

                            $email_td=$("<td></td>");

                            $email_td.text(in_user_email);//"<td>电邮</td>"

                            $tel_td=$("<td></td>");

                            $tel_td.text(in_user_tel);//"<td>电话</td>"

                            $a_td=$("<td></td>");

                            $myHref=$("<a></a>");

                            $myHref.text("删除");

                            $myHref.attr("href","delEmpController.php?name="+in_user_name);

                            $a_td.append($myHref);

                            $tr.append($name_td);

                            $tr.append($email_td);

                            $tr.append($tel_td);

                            $tr.append($a_td);

                            //超链接还没有绑定点击事件??.

                            $myHref.click(function(){

                                   //如何显示用户名字,并且让用户选择是否真的删除用户

                                   //<ahref='delEmpController.php?name=xiaoxiao'>删除</a>

                                   varb=window.confirm($(this).parent().parent().children().eq(0).text());

                                   if(b){

                                          $(this).parent().parent().remove();

                                          returnfalse;

                                   }else{

                                          returnfalse;

                                   }

                           

                            })

                            $('#usertabletbody').append($tr);

                     });

              })

       </script>

</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值