JQuery实现添加删除数据

来源：互联网发布：arm linux内核编辑：程序博客网时间：2024/05/01 06:47

这是我们要显现的效果

划重点:增加/删除/全选/反选/批量删除/二级联动

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

加入一些简单的CSS样式

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

然后就是一些简单的逻辑问题

地区:用二级联动实现

        $(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();            }        }

阅读全文

0 0