您的位置：首页 > Web前端 > JQuery

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

2015-08-18 14:47 1041 查看

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" />

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

                     电话: <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> </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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 表单

相关文章推荐

新的分享

章节导航