JQuery实现添加删除数据全选反选隔行变色二级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		  <style>
        *{
            padding: 0px;
            margin: 0px;
            /*box-sizing: border-box;*/
        }
        .box{
            width: 800px;
            height: 500px;
            margin: 20px auto;
            padding: 10px;
        }
        .box table:nth-child(1){
            width: 780px;
            margin-bottom: 5px;
        }
        .box table:nth-child(1) tr td{
            height: 30px;
        }
        .box table:nth-child(1) tr td input{
            width: 84px;
            height: 25px;
        }
        .box table:nth-child(1) tr td select{
            width: 84px;
            height: 25px;
        }
        .box table:nth-child(1) tr td .btn{
            background: #99ff00;
            border-radius: 5px;
            border: 1px solid #666666;
        }
        .box>input{
            width: 70px;
            height: 28px;
            float: right;
            border-radius: 5px;
            border: 1px solid #666666;
            margin-left: 30px;
            margin-bottom: 5px;
        }
        .box>input:nth-child(3){
            background: green;
        }
        .box>input:nth-child(2){
            background: yellow;
        }
        .box .bg{
            width: 780px;
            margin-bottom: 5px;
        }
        .box .bg tr:nth-child(1){
            background: gold;
        }
        .box .bg tr:nth-child(2n){
            background: greenyellow;
        }
    </style>
    <script src="lib/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    	 $(function(){
            var city = $("#city").val();
            var regions = [["海淀","朝阳"],["安阳","濮阳","信阳","南阳","洛阳"]];
            for(var i = 0; i < regions[city].length; i++){
                var op = $("<option></option>");
                console.log("---",regions[city][i]);
                op.text(regions[city][i]);
                $("#region").append(op);
            }
            $("#city").change(function(){
                city = $(this).val();
                $("#region").empty();
                for(var i = 0; i < regions[city].length; i++){
                    var op = $("<option></option>");
                    console.log("---",regions[city][i]);
                    op.text(regions[city][i]);
                    $("#region").append(op);
                }
            });
        });
        
         function add(){
            var b1 = false;
            var b2 = false;
            var name = $("#name").val();
            var birthday = $("#birthday").val();
            var sex = $("#sex").val();
            var sel = $("#region").val();
            var cs = $("#city option:selected").html();

            if(name == ""){
                b1 = false;
            }else if(name.length < 3 || name.length >30){
                b1 = false;
            }else{
                b1 = true;
            }

            if(birthday == ""){
                b2 = false;
            }else{
                b2 = true;
            }

            if(b1 == false || b2 == false){
                alert("输入信息有误");
            }else{
                $(".bg").append("<tr>" +
                "<td><input type='checkbox' name='ck' ></td>" +
                "<td>" + name +"</td>" +
                "<td>" + sex +"</td>" +
                "<td>" + birthday +"</td>" +
                "<td>" + cs + "-" + sel +"</td>" +
                "<td><input type='button' onclick='return del(this)' value='删除'></td>" +
                "</tr>");
            }       
        }
           //弹窗提示
        function del(p){
            var f = confirm("确认删除!!!");
            if(!f){
                return;
            }
            p.parentNode.parentNode.remove();
        }
        function cheAll(){
            var cek = $("#che")[0].checked;
            var ck = $("input[name='ck']");
            for(var i = 0; i < ck.length; i++){
                ck[i].checked = cek;
            }
        }
        function che(){
            var cks = document.getElementsByName("ck");
            for(var i = 0; i < cks.length; i++) {
                cks[i].checked = !cks[i].checked;
            }
        }
        function delAll(){
            var ck = $("input:checked[name='ck']");
            if(ck.length == 0){
                alert("请选择,然后进行删除");
                return;
            }
            var f=confirm("确认删除!!");
            if(!f){
                return;
            }
            for(var i = 0; i < ck.length; i++){
                ck[i].parentNode.parentNode.remove();
            }
        }
    </script>
	</head>
	<body>
		 <div class="box">
        <table>
            <tr>
                <td>姓名：<input type="text" id="name"></td>
                <td>性别：<select id="sex"><option>男</option><option>女</option></select></td>
                <td>生日：<input type="text" id="birthday"></td>
                <td>住址：
                    <select id="city">
                        <option value="0">北京</option>
                        <option value="1">河南</option>
                    </select>
                    <select id="region">
                    </select>
                </td>
                <td><input type="button" onclick="add()" value="添加" class="btn"></td>
            </tr>
        </table>
        <input type="button" onclick="delAll()" value="批量删除" />
        <input type="button" onclick="che()" value="全选/反选" />
        <table border="1" cellspacing="0" cellpadding="0" class="bg">
            <tr>
                <td><input type="checkbox" onclick="cheAll()" id="che"></td>
                <td>姓名</td>
                <td>性别</td>
                <td>生日</td>
                <td>住址</td>
                <td>操作</td>
            </tr>
        </table>
    </div>
	</body>
</html>
JQuery实现添加删除数据全选反选隔行变色二级联动

猜你喜欢
