添加数据+二级联动+全选删除

来源：互联网发布：win7蓝屏修复软件编辑：程序博客网时间：2024/06/05 19:06
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="jQuery-2.1.0/jquery-2.1.0.js"></script><script>//全选全不选另一种简单方法   一行 //判断是否全选    //   $("#checkAll").click(function() {     //    $('input[name="subBox"]').prop("checked",this.checked);    }); // 创建一个二维数组                var arr = new Array(2);                arr[0] = ["广东","广州","深圳","佛山"];                arr[1] = ["湖北","荆州","武汉","赤壁"];                                function choose(val){                    // 获取city的select                    var city = document.getElementById("city");                    // 获取option                    var cityOp = city.getElementsByTagName("option");                    // 设置可操作                    city.disabled = false;                    // 先删除，后添加                    for (var i = 0; i < cityOp.length; i++) {                        var op = cityOp[i];                        // 删除option                        city.removeChild(op);                        //数组长度发生变化，需处理                        i--;                    }                                        // 遍历                    for (var i = 0; i < arr.length; i++) {                        //取一维数组                        var arr1 = arr[i];                        //取一维数组的第一个值                        var firstVal = arr1[0];                        //判断                        if(firstVal == val){                            //遍历                            for (var j = 1; j < arr1.length; j++) {                                // 获取城市名                                var value = arr1[j];                                // 创建option                                var optionl = document.createElement("option");                                // 创建文本                                var textl = document.createTextNode(value);                                // 把文本添加到标签                                optionl.appendChild(textl);                                //添加到city里面                                city.appendChild(optionl);                            }                        }                    }                }function get(){        var xb = $('[name="aa"]:checked').size(); if(xb!=1){ alert("请选择性别"); }var oo = $('[name="aa"]:checked').val();alert(oo);    }  function tian(){var name = $('.name').val();var pass = $('.pass').val();var age = $('.age').val();var oo = $('[name="aa"]:checked').val();//获取省市的值var $cityV = $("#province option:selected").html();var $city2V = $("#city option:selected").html();// var tr = $("<tr><td>"+大姐夫呢+"</td><td>"+大姐夫呢+"</td><td>"+123+"</td><td>"+45+"</td><td>"+男+"</td><td>"+地址+"</td></tr>");var tr = $("<tr><td><input class='cx' type='checkbox'/></td><td>"+name+"</td><td>"+pass+"</td><td>"+age+"</td><td>"+oo+"</td><td>"+$cityV+$city2V+"</td></tr>");alert(tr);$(".er").append(tr);}$(document).ready(function(e) {$('#qx').click(function(){var fl = $(this).prop("checked");if(fl){//全选var $ch = $(":checkbox");$ch.each(function(index, element) {                   $ch[index].checked=true;               });}else{//全不选var $ch = $(":checkbox");$ch.each(function(index, element) {                   $ch[index].checked=false;               });}});$('#dele').on('click', function(){$(".er :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素});        $('.tj').click(function(){//get();if(flag1 && flag2 && flag3){tian();}else{alert("请按要求输入信息");}});var flag1 = false;var flag2 = false;var flag3 = false;var name = $('.name').val();var pass = $('.pass').val();var age = $('.age').val();var sname = $('.sname');var spass = $('.spass');var sage = $('.sage');var ssex = $('.ssex');$('.name').blur(function(){var name = $('.name').val();if(name.length<=0){sname.html("用户不能为空");flag1=false;}else{sname.html("");flag1=true;}});$('.pass').blur(function(){var pass = $('.pass').val();if(pass.length<4 || pass.length>16){spass.html("密码为4-6位");flag2=false;}else{spass.html("");flag2=true;}});$('.age').blur(function(){var age = $('.age').val();if(isNaN(age)){spass.html("年龄必须为数字");flag3=false;}else{spass.html("");flag3=true;}});    });</script></head><body><center><h3>用户注册</h3><table width="240" border="1" cellspacing="1">  <tbody>    <tr>      <td>用户名:</td>      <td><input class="name" type="text" placeholder="用户名不能为空"/></td>    </tr><span class="sname"></span>    <tr>      <td>密码:</td>      <td><input class="pass" type="text" placeholder="长度在4-16位之间空"/></td>    </tr><span class="spass"></span>    <tr>      <td>年龄:</td>      <td><input class="age" type="text" placeholder="年龄必须是数字"/></td>    </tr><span class="sage"></span>    <tr>      <td>性别:</td>      <td><input class="sex" type="radio" name="aa" value="男" />男<input type="radio" name="aa" value="女" />女</td>    </tr><span class="ssex"></span>    <tr>      <td>住址:</td>      <td>            <select id="province" onchange="choose(this.value)">            <option value="0">--请选择省--</option>            <option value="广东">广东</option>            <option value="湖北">湖北</option>        </select>                <select id="city" disabled="disabled">            <option value="0">--请选择市--</option>        </select>      </td>    </tr>    <tr>      <td colspan="2" align="center"><button class="tj">提交</button></td>    </tr>  </tbody></table><br/><br/><button id="dele">批量删除</button><table  width="240" border="1" cellspacing="1">  <tbody class="er">    <tr>      <td><input id="qx" type="checkbox"/></td>      <td>用户名</td>      <td>密码</td>      <td>年龄</td>      <td>性别</td>      <td>住址</td>    </tr>  </tbody></table></center></body></html>
阅读全文
0 0