Jquery-1实现简单的复选框删除增加操作

最新推荐文章于 2023-03-20 19:51:08 发布

qq_34734520

最新推荐文章于 2023-03-20 19:51:08 发布

阅读量1.3k

点赞数

分类专栏： java之Jquery

本文链接：https://blog.csdn.net/qq_34734520/article/details/51605580

版权

java之Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.实现简单的复选框删除增加操作

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的复选框删除增加操作</title>

/<span style="font-size:18px;color:#ff0000;">/引用的是jquery-2.2.4.js版本
    <script src="js/jquery-2.2.4.js"></script></span>
    <script>
        $(function(){
           $("input[type=checkbox]:eq(0)").change(function(){
              var checkvalue=$(this).prop("checked");
               <span style="font-size:24px;color:#ff0000;">//not(0)表示不选第一行操作栏</span>
               $("input[type=checkbox]:not(0)").prop("checked",checkvalue);
                if($(this).prop("checked")){
                    $("input[type=checkbox]:not(0)").prop("checked","true");
                }else{
                    $("input[type=checkbox]:not(0)").prop("checked","");
                }
           });
            //单条删除
            $("td a").click(function(){
                //提示框
               if(confirm("你确定真的要删除嘛")){
                   $(this).parent("td").parent("tr").remove();
               }
            });
            //选择框选定的才删除
            $("input[value='删除']").click(function(){
                //提示框
                if(confirm("你确定真的要删除嘛")) {
                    $("input[type='checkbox']:not(:first):checked").parent("td").parent("tr").remove();
                }
            });
            $("input[value='增加']").click(function(){
                //进行字符串拼接
                var strShopInfo="<tr>"+
                "<td><input type=\"checkbox\"/></td>"+
                "<td>张四</td>"+
                "<td>1222211111</td>"+
                "<td><a href=\"#\" οnclick='deleteItem(this)'>删除</a></td>"+
                "</tr>";
                $("#myTableProduct tbody").append(strShopInfo);
            });

        });
        <span style="font-size:32px;color:#ff0000;">//新定义一个方法以便让增加后数据也能删除，关键点</span>
        function deleteItem(obj){
            //提示框
            if(confirm("确定要删除嘛")) {
                $(obj).parent("td").parent("tr").remove();
            }
        }
    </script>
</head>
<body>
<table border="1px" cellspacing="0px" id="myTableProduct">
    <tr>
        <td><input type="checkbox" />全选</td>
        <td>用户名</td>
        <td>电话号码</td>
        <td>操作</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>张三</td>
        <td>1222211111</td>
        <td><a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>张四</td>
        <td>1222211111</td>
        <td><a href="#">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>
        <td>张五</td>
        <td>1222211111</td>
        <td><a href="#">删除</a></td>
    </tr>
</table>
<input type="button" value="增加"/>
<input type="button" value="删除"/>
</body>
</html>

qq_34734520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery-1实现简单的复选框删除增加操作

1.实现简单的复选框删除增加操作简单的复选框删除增加操作 $(function(){ $("input[type=checkbox]:eq(0)").change(function(){ var checkvalue=$(this).prop("checked");
复制链接

扫一扫