H5+JS表格全选和删除

最新推荐文章于 2023-03-01 14:42:28 发布

二次元纸片人

最新推荐文章于 2023-03-01 14:42:28 发布

阅读量699

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_34856792/article/details/121892314

版权

全选

let input=document.getElementsByTagName("input");
        $("#Complete").click(function () {//单击全选
            if (this.checked===true){
                for (let i=1;i<input.length;i++){
                    input[i].checked=true;
                }
            }else {
                for (let f=1;f<input.length;f++){
                    input[f].checked=false;
                }
            }
        });

单选全部选中

$(".second").click(function () {//单选全部选中
            let num=0;
            if (this.checked===false){
                document.getElementById("Complete").checked=false;
            }else {
                for (let i=1;i<input.length;i++){
                    if (input[i].checked){
                        num++;
                    }
                    if (num===input.length-1){
                        document.getElementById("Complete").checked=true;
                    }
                }
            }
        });

删除

$(".delete").click(function () {//删除
            for (let i=input.length-1;i>=1;i--){
                if (input[i].checked===true){
                    input[i].parentNode.parentNode.parentNode.removeChild(input[i].parentNode.parentNode)
                }
                if (input.length===1){
                    document.getElementById("Complete").checked=false;
                    $(".without").show();
                }
            }
        })

<table border="1px" cellspacing="0" cellpadding="0" >
        <tr>
            <td><input type="checkbox" id="Complete">全选</td>
            <td>商品信息</td>
            <td>商品价格</td>
            <td>商品数量</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="second"></td>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="second"></td>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="second"></td>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
        <tr>
            <td colspan="4" class="without">暂无数据...</td>
        </tr>
        <tr>
            <td style="cursor: pointer" colspan="4" class="delete">删除选中</td>
        </tr>
    </table>