jQuery对于表单的操作

最新推荐文章于 2022-07-30 17:29:30 发布

2198473308

最新推荐文章于 2022-07-30 17:29:30 发布

阅读量241

点赞数

分类专栏： jQuery对于表单的操作文章标签： jQuery对于表单的操作

jQuery对于表单的操作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <script type="text/javascript" src="jQuery包/jquery-2.1.0.js" ></script>
   <script>
       $(function(){
           $("#sub").click(function(){
               var flag1=flag2=flag3=flag4=false;
               var name=$("#name").val();
               //判断name是否为空
               if(name==null||name==""){
                   $("span").text("用户名不能为空");
                   flag1=false;
               }else{
                   flag1=true;
               }
               //密码的长度验证
               //取出标签控件并得到长度进行判断
               var pwd=$("#pwd").val();
               var size=pwd.length;
               if(size>=4&&size<=16){
                   flag2=true;
               }else{
                   flag2=false;
               }
               //进行判断是否为数字进行验证
               var age=$("#age").val();
               if(isNaN(age)){
                   alert("年龄必须是数字");
                   flag3=false;
               }else{
                   flag3=true;
               }

               //取出性别的标签的数据值
               var sex=$("[name='sex']:checked");
               var sex2=sex.val();
               var sexcheck=sex.size();
               if(sexcheck!=1){
                   alert("性别必选");
                   flag4=false;
               }else{
                   flag4=true;
               }
               //取出地址数据
               var sheng=$("#sheng").val();
               var city=$("#city").val();
               //判断如果每个input都输入正确那么将创建单元格
               if(flag1&&flag2&&flag3&&flag4){
                   alert("成功");
//                   //创建单元格
//                   var tName = $("<td>"+name+"</td>");
//                   var tPwd = $("<td>"+pwd+"</td>");
//                   var tAge = $("<td>"+age+"</td>");
//                   var tSex = $("<td>"+sex2+"</td>");
//                   var tCity = $("<td>"+sheng+"-"+city+"</td>");
//                   var tr=("<tr>");
//                   //将创建的td单元格放入tr中
//                   tr.append(tName).append(tPwd).append(tAge).append(tSex).append(tCity);
//                   //获取全局标签tbody选取第二个放入创建的tr标签
                   $("tbody:eq(1)").append("<tr><th><input type='checkbox' /></th><th>"+name+"</th><th>"+pwd+"</th><th>"+age+"</th><th>"+sex2+"</th><th>"+sheng+"</th></tr>");
               }else{
                   alert("出错");
               }

           });
           //是城市的名字对应省份
               $("#sheng").change(function(){
               var privince = $(this).val();
               if(privince == "北京"){
                   //选中北京怎么更改城市下拉菜单中的内容
                   var city = $("<option selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>");
                   $("#city").html(city);

               }
               if(privince == "河北"){
                   var city = $("<option >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>");
                   $("#city").html(city);
               }
               if(privince == "山西"){
                   var city = $("<option selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>");
                   $("#city").html(city);
               }
           });

           var a = 0;
           $("#first").click(function(){
               //var result = alert($(this).attr("checked"));
               //a = 1;
               if(a == 0){
                   //alert();
                   $(":checkbox").prop("checked","checked");
                   a = 1;
               }else{
                   //alert("asdf");
                   $(":checkbox").prop("checked",false);
                   a = 0;
               }
           });
           $("#del").click(function(){
                   //data表格下有是checked且没有id属性的都删除
                   $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素


               })
       });

   </script>
   <body>
       <center>
           <h3>用户注册</h3>
           <table border="1px soild black" cellpadding="10" cellspacing="0">
               <form>
                   <tbody>
                       <tr>
                           <th>用户名</th>
                           <td><input type="text" id="name" placeholder="用户名不能为空"/><span></span></td>
                       </tr>
                       <tr>
                           <th>密码</th>
                           <td><input type="text" id="pwd" placeholder="长度必须在4-16位之间"/></td>
                       </tr>
                       <tr>
                           <th>年龄</th>
                           <td><input type="text" id="age" placeholder="年龄必须是数字"/></td>
                       </tr>
                       <tr>
                           <th>性别</th>
                           <td><input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女</td>
                       </tr>
                       <tr>
                           <th>住址</th>
                           <td>
                               省<select id="sheng">
                                   <option>河南</option>
                                   <option>河北</option>
                                   <option>北京</option>
                               </select>
                               市<select id="city">
                                   <option>郑州</option>
                                   <option>石家庄</option>
                                   <option>北京</option>
                               </select>
                           </td>
                       </tr>
                       <tr>
                           <th colspan="2"><input type="button" id="sub" value="提交" /></th>
                       </tr>
                   </tbody>
               </form>
           </table><br />

           <button id="del">批量删除</button>
           <table border="1px solid blue" cellpadding="10" cellspacing="0" id="data">
           <thead>
               <tr>
                   <th><input id="first" type="checkbox" /> </th>
                    <th>用户名</th>
                    <th>密　码</th>
                    <th>年　龄</th>
                    <th>性　别</th>
                    <th>住　址</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
       </center>
   </body>
</html>

2198473308

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对于表单的操作

$(function(){ $("#sub").click(function(){ var flag1=flag2=flag3=flag4=false; var name=$("#name").val(); //判断name是否为空
复制链接

扫一扫