dscs4 2020-08-14 16:17 采纳率: 16.7%
浏览 371

js批量删除表格选中框

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        html body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        div.top {
            width: 100%;
            height: 30%;
            margin: 50px auto;
            text-align: center;
        }

        div.top input {
            height: 20px;
            width: 200px;
            vertical-align: middle;

        }

        div button.search {
            font-size: 15px;
            background-color: #09b4c5;
            width: 70px;
            height: 30px;
            vertical-align: middle;
        }

        div.middle button {
            margin-left: 30px;
            width: 120px;
            height: 40px;
            font-size: 18px;
            color: white;
            background-color: rgba(240, 59, 27, 0.699);
        }

        div.table table {
            width: 95%;
            margin: 20px auto;
        }

        table,
        th,
        td {
            border: solid black 1px;
        }

        div.table table {
            text-align: center;
            vertical-align: middle;
            border-collapse: collapse;
        }

        thead {
            background-color: #30a9f1;
        }

        tbody {
            background-color: #d6eaf6;
        }

        thead>tr>th {

            height: 50px;
        }

        tbody>tr>td {

            height: 40px;
        }

        .choose {
            width: 5%;
        }

        th.order {
            width: 5%;
        }

        th.ordername {
            width: 12%;
        }

        th.production {
            width: 12%;
        }

        th.size {
            width: 10%;
        }

        th.number {
            width: 10%;
        }

        th.price {
            width: 10%;
        }

        th.note {
            width: 16%;
        }

        th.operation {
            width: 20%;
        }

        button {
            outline: none;
        }

        .delbtn {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: #8a6d3b;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .movebtn {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: #843534;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .viewbtn {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: #f0ad4e;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .addbtn {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: #31708F;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .delbtn {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: #8a6d3b;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .movebtn {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: #843534;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .viewbtn {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: #f0ad4e;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        #addmodal {
            position: fixed;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }

        #viewmodal {
            position: fixed;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }

        #movemodal {
            position: fixed;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .modal-dialog {
            position: relative;
            width: 500px;
            margin: 20px auto;
            background: white;
            border-radius: 5px;
        }

        .modal-header {
            height: 20px;
            padding: 5px;

            border-bottom: 1px solid #e5e5e5;
        }

        .modal-header>h4 {
            vertical-align: top;
            margin: 0;
        }

        .modal-header>i {
            padding-top: -2px;
            font-weight: bold;
            color: #ADADAD;
            float: right;
            cursor: pointer;
        }

        .modal-body {
            position: relative;
            padding: 15px;
        }

        .modal-body input {
            width: 300px;
            border-radius: 4px;
            border: 1px solid #DDDDDD;
            outline: none;
            padding: 10px;
            margin: 10px;
        }

        .modal-footer {
            padding: 15px;
            text-align: right;
            border-top: 1px solid #e5e5e5;
        }

        .addbtn_ok {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: deepskyblue;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .addbtn_no {
            width: 40px;
            height: 25px;
            border-radius: 4px;
            background: darkslateblue;
            color: white;
            border: none;
            outline: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="top">
        <input type="text" name="search" id="myInput" placeholder="搜索..." autocomplete="off">
        <button class="search" id="find">
            <i class="fas fa-search"></i>
            搜索</button>
    </div>
    <div class="middle">
        <button class="add addbtn">
            <i class="far fa-plus-square"></i>
            添加</button>
        <button class="delete" id="deleall">
            <i class="far fa-trash-alt"></i>
            删除</button>
        <button class="export">
            <i class="fas fa-file-export"></i>
            导入</button>
        <button class="import">
            <i class="fas fa-file-export"></i>
            导出</button>
    </div>
    <div class="table">
        <table id="mytable" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th class="choose">
                        <input id="chooseall" 
                            type="checkbox" class="checkall  i-checks" />
                    </th>
                    <th class="ordername">号</th>
                    <th class="production">号</th>
                    <th class="size">号</th>
                    <th class="number">号</th>
                    <th class="price">号</th>
                    <th class="note">号</th>
                    <th class="operation">操作</th>
                </tr>
            </thead>
            <tbody id="num">
                <tr class="datarow">
                    <td class="choose">
                        <input type="checkbox" class="i-checks ace" />
                    </td>
                    <td class="indent">1101</td>
                    <td class="product">4552</td>
                    <td class="specification">20*85</td>
                    <td class="amount">58</td>
                    <td class="money">0.3</td>
                    <td class="remark">ffb</td>
                    <td class="handle">
                        <button class="delbtn ">删除</button>
                        <button class="movebtn ">修改</button>
                    </td>
                </tr>
                <tr class="datarow">
                    <td class="choose">
                        <input type="checkbox" class="i-checks ace" />
                    </td>
                    <td class="indent">1101</td>
                    <td class="product">4552</td>
                    <td class="specification">20*85</td>
                    <td class="amount">58</td>
                    <td class="money">0.3</td>
                    <td class="remark">ffb</td>
                    <td class="handle">
                        <button class="delbtn ">删除</button>
                        <button class="movebtn ">修改</button>
                    </td>
                </tr>
                <tr class="datarow">
                    <td class="choose">
                        <input type="checkbox" class="i-checks ace" />
                    </td>
                    <td class="indent">1101</td>
                    <td class="product">4552</td>
                    <td class="specification">20*85</td>
                    <td class="amount">58</td>
                    <td class="money">0.3</td>
                    <td class="remark">ffb</td>
                    <td class="handle">
                        <button class="delbtn ">删除</button>
                        <button class="movebtn ">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./js/jquery.js"></script>
    <script type="text/javascript">
     // 删除选项
     $("#deleall").click(function() {
            var cbs = $("input[type=checkbox]:checked");//只删除class=ace的，而不能是删除所有选择的复选框。
            if(cbs.length == 0) {
                alert("请至少选择一个")                        
            }
            for(var i = 0; i < cbs.length; i++) {
                var cb = cbs[i];                        
                if(cb.id!='chooseall')//防止删除表头中的复选框                        
                    cb.parentNode.parentNode.parentNode.remove();
            }

        });

         //全选/全不选
        var flag = true;
        $("#chooseall").click(function() {
            var cb = $("input[type=checkbox]");                    
            for(var i = 0; i < cb.length; i++) {
                cb[i].checked = flag;
            }
            flag = !flag;
        })
    </script>
</body>

</html>

为什么我无论选中几个，点击删除时都是全部删除啊？

  • 写回答

1条回答 默认 最新

  • hcgee 2020-08-14 16:53
    关注
    // 删除选项
$('#chooseall').remove()
$("#deleall").click(function() {
    var cbs = $("input[type=checkbox]:checked");//只删除class=ace的，而不能是删除所有选择的复选框。
    if(cbs.length == 0) {
        alert("请至少选择一个")
    }
    for(var i = 0; i < cbs.length; i++) {
        cbs[i].parentNode.parentNode.remove();
    }

});
    评论

报告相同问题？

悬赏问题

  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图