jsjQuery实现简易全选 点击出现表格实现增加删除 判断非空

jsjQuery实现简易全选 点击出现表格实现增加删除 判断非空

全选思路
点击一个将其他设置为选中状态,
prop("checked",true);
这个方法就是将多选框设置为选中状态
全选代码

 //全选
    $("tr:first>td>input:checkbox").click(function(){
        if($(this).prop("checked")){
            $("tr>td>input:checkbox").prop("checked",true);
            $("#checkMsg").text("已全选");
        }else{
            $("tr>td>input:checkbox").prop("checked",false);
            $("#checkMsg").text("已取消全选");
        }
    });

点击删除当前行
通过this获取当前行删除当前tr即可实现
(confirm(“是否删除”)是确认弹出框返回值为true或false

 //删除
    $("table").on("click","a:last-child",function (){
        if(confirm("是否删除")){
            //隔行换色的容错处理
        $("tr:odd").removeClass("odd");
        //删除操作
        $(this).parents("tr").remove();
            //隔行换色的容错处理
        $("tr:odd").addClass("odd");
        }else{}

    });

添加操作
以下代码有详细注释

   //添加
    //该变量用来id自增
    var c = 5;
    //点击显示添加表格
    $("form>input:first").click(function () {
        $("div>table").fadeIn("slow")
        //赋个空白 防止下次点击后还是原来输入的字符串
        $("input:text" ).val("");
    });
    //收起添加表格
    $("form>input:eq(1)").click(function () {
        $("div>table").slideUp("fast");
    });
//点击添加到表格
    $("#tj").click(function () {
        //获取输入框的值
        var a = $("#name").val();
        var b = $("#ms").val();
        //console.log(a.length+":"+b)
        //判断是否为空
       if( a.length>0&&b.length>0) {
           $("form>table").append('<tr><td><input type="checkbox"></td><td></td><td></td><td></td><td><a>修改</a>丨<a>删除</a></td></tr>')
           $("form table tr:last td:eq(1)").append(++c);
           $("form table tr:last td:eq(2)").append(a);
           $("form table tr:last td:eq(3)").append(b);
           $("tr:odd").addClass("odd");
           $("div>table").fadeOut("slow");
       }else{
           alert("请输入完整")
       }
    });

全部代码
注意jQuery的引用路径

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
table,tr,td{
    /*margin: 0 auto;*/
    border-collapse: collapse;
    padding-left: 5px;
    width: 500px;
    height: 30px;
    color: #000;
        }
        a{
            color: blue;
        }
    a:hover{
    cursor:pointer;
        }
        .odd{
            background-color:#FFF38F;
        }
        div>table, div>table>tr,div>table>tr>td{
            margin: 0 auto;
            display: none;
            width: 300px;
            border: 1px solid#000000;
            text-align: center;
            background-color: #FFF38F;
        }
    </style>
</head>
<body>
<form>
    <input type="button" value="新增"><input type="button" value="收起">
    <table border="1px solid #999">
        <tr><td><input type="checkbox" ></td><td>分类的ID</td><td>分类的名称</td><td>分类的描述</td><td>操作</td></tr>
        <tr><td><input type="checkbox"></td><td>1</td><td>手机数码</td><td>手机数码</td><td><a >修改</a>丨<a >删除</a></td></tr>
        <tr><td><input type="checkbox"></td><td>2</td><td>电脑办公</td><td>电脑办公</td><td><a >修改</a>丨<a >删除</a></td></tr>
        <tr><td><input type="checkbox"></td><td>3</td><td>烟酒糖茶</td><td>烟酒糖茶</td><td><a >修改</a>丨<a >删除</a></td></tr>
        <tr><td><input type="checkbox"></td><td>4</td><td>鞋靴箱包</td><td>鞋靴箱包</td><td><a >修改</a>丨<a >删除</a></td></tr>
        <tr><td><input type="checkbox"></td><td>5</td><td>汽车用品</td><td>汽车用品</td><td><a >修改</a>丨<a >删除</a></td></tr>
    </table>
</form>

<div class="div">
    <table>
        <tr><td>名称</td><td> <input id="name" type="text"></td></tr>
        <tr><td>描述</td><td> <input id="ms" type="text"></td></tr>
        <tr><td colspan="2"><input type="button" id="tj" value="提交"></td></tr>
    </table>
</div>
<script>
    $("tr:odd").addClass("odd");
    $("tr:first>td").append("<span id='checkMsg'></span>")
    //全选
    $("tr:first>td>input:checkbox").click(function(){
        if($(this).prop("checked")){
            $("tr>td>input:checkbox").prop("checked",true);
            $("#checkMsg").text("已全选");
        }else{
            $("tr>td>input:checkbox").prop("checked",false);
            $("#checkMsg").text("已取消全选");
        }
    });
    //添加
    //该变量用来id自增
    var c = 5;
    //点击显示添加表格
    $("form>input:first").click(function () {
        $("div>table").fadeIn("slow")
        //赋个空白 防止下次点击后还是原来输入的字符串
        $("input:text" ).val("");
    });
    //收起添加表格
    $("form>input:eq(1)").click(function () {
        $("div>table").slideUp("fast");
    });
//点击添加到表格
    $("#tj").click(function () {
        //获取输入框的值
        var a = $("#name").val();
        var b = $("#ms").val();
        //console.log(a.length+":"+b)
        //判断是否为空
       if( a.length>0&&b.length>0) {
           $("form>table").append('<tr><td><input type="checkbox"></td><td></td><td></td><td></td><td><a>修改</a>丨<a>删除</a></td></tr>')
           $("form table tr:last td:eq(1)").append(++c);
           $("form table tr:last td:eq(2)").append(a);
           $("form table tr:last td:eq(3)").append(b);
           $("tr:odd").addClass("odd");
           $("div>table").fadeOut("slow");
       }else{
           alert("请输入完整")
       }
    });
    //删除
    $("table").on("click","a:last-child",function (){
        if(confirm("是否删除")){
            //隔行换色的容错处理
        $("tr:odd").removeClass("odd");
        //删除操作
        $(this).parents("tr").remove();
            //隔行换色的容错处理
        $("tr:odd").addClass("odd");
        }else{}

    });

</script>
</body>
</html>
匿名

发表评论

匿名网友