H5+JS表格全选和删除

最新推荐文章于 2022-12-21 21:54:22 发布

原创最新推荐文章于 2022-12-21 21:54:22 发布 · 777 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

全选

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>