jQuery实现table的全选和删除（附源码）

最新推荐文章于 2024-07-14 03:32:51 发布
脑袋空白的此刻
最新推荐文章于 2024-07-14 03:32:51 发布
阅读量282
点赞数
文章标签： jquery javascript css
本文链接：https://blog.csdn.net/qq_46058550/article/details/125250930
版权
1.vue实现这些功能传送门
http://t.csdn.cn/t9QVq
2.界面
在这里插入图片描述
3.代码
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">

    <title>table1</title>
</head>
<style type="text/css">


    html,body {
        height: 100%;

        color: #00FF00;
    }
    body{


        background: url(https://s1.ax1x.com/2020/07/30/ansR4x.jpg)center center;
        background-size: cover;

    }

    a {
        color: #c75f3e;
    }

    #mytable {
        width: 700px;
        padding: 0;
        margin: 0;
    }

    caption {
        padding: 0 0 5px 0;
        width: 700px;
        font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-align: right;
    }

    th {
        font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #4f6b72;
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        border-top: 1px solid #C1DAD7;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: left;
        padding: 100px 100px 5px 100px;
        background: wheat  no-repeat;
    }



    td {
        border-right: 1px solid #C1DAD7;
        border-bottom: 1px solid #C1DAD7;
        background: #fff;
        font-size:11px;
        padding: 6px 6px 6px 12px;
        color: #4f6b72;
    }


    p{
        font-size: 20px;
        color: black;
    }
    input{
        width: 40px;
    }

    .myButton {
        box-shadow:inset 0px 1px 0px 0px #bbdaf7;
        background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
        background-color:#79bbff;
        border-radius:20px;
        border:1px solid #84bbf3;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:Arial;
        font-size:15px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:0px 1px 0px #528ecc;
    }
    .myButton:hover {
        background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
        background-color:#378de5;
    }
    .myButton:active {
        position:relative;
        top:1px;
    }

    .del{
        color: orangered;
    }
</style>
<script src="../jquery_te/jquery-3.6.0.js"></script>
<body>
<table id="mytable" cellspacing="0" >
    <caption> </caption>
    <tr>
        <th scope="col">全选<input type="checkbox" id="select_all"></th>
        <th scope="col">商品id</th>
        <th scope="col">商品名</th>
        <th scope="col">商品单价(元/kg)</th>
        <th scope="col">购买数量</th>
        <th scope="col">总价</th>
        <th scope="col">操作</th>
    </tr>
    <tr class="g">
        <td class="row"><input type="checkbox" class="select_one"></td>
        <td class="g_id">2</td>
        <td class="goods">苹果</td>
        <td class="price">20</td>
        <td class="num"><input type="text" value=1></td>
        <td class="sum"></td>
        <td class="option"><button class="del">删除</button></td>
    </tr>
    <tr class="g">
        <td class="row"><input type="checkbox" class="select_one"></td>
        <td class="g_id">2</td>
        <td class="goods">香蕉</td>
        <td class="price">20</td>
        <td class="num"><input type="text" value=1></td>
        <td class="sum"></td>
        <td class="option"><button class="del">删除</button></td>
    </tr>
    <tr class="g">
        <td class="row"><input type="checkbox" class="select_one"></td>
        <td class="g_id">2</td>
        <td class="goods">芒果</td>
        <td class="price">20</td>
        <td class="num"><input type="text" value=1></td>
        <td class="sum"></td>
        <td class="option"><button class="del">删除</button></td>
    </tr>
    <tr class="g">
        <td class="row"><input type="checkbox" class="select_one"></td>
        <td class="g_id">2</td>
        <td class="goods">香蕉</td>
        <td class="price">30</td>
        <td class="num"><input type="text" value=1></td>
        <td class="sum"></td>
        <td class="option"><button class="del">删除</button></td>
    </tr>
</table>
<p>总金额</p>
<button class="settlement">结算</button>
<script>

    $(function () {
        //需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.
        //需求2:下面的多选框,都有单击事件:
        //如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.
        //思路  checked属性 是固有属性 prop("checked")获取  把全选状态给3个小复选框就行
        //需求1：
        $('#select_all').click(function () {
            //获取这多选框的checked值。
            var checkedValue = $(this).prop('checked');
            //让下面的多选框们的checked跟随这个checkedValue
            $('.select_one').prop('checked',checkedValue);

        });

        //需求2：
        $('.select_one').click(function () {
            //判断下面的那四个多选框是否都被选中了。伪数组
            //获取到下面所有多选框的个数。
            var numOfAll = $('.select_one').length;
            //获取到下面被选中的多选框的个数。
            var numOfSelect = $('.select_one:checked').length;
            //判断
            $('#select_all').prop('checked',numOfAll == numOfSelect);
        });
        //删除操作
        $(".del").on({
            click: function () {
                //1.提示
                alert("已经删除"+ $(this).parent().siblings('.goods').text());
                //2.移除
                $(this).parents('tr').remove();
                getNum();
            }
        })
        $("input").change(function () {
            getNum();
        })
        //小计
        getNum();
        function getNum() {
            var count = 0;
            var money = 0;
            var sum_price = 0;
            //遍历tr 计算出每个商品的总价格
            $("tr").each(function (i, ele) {
                count = parseInt($(ele).children(".num").children("input").val());
                money = parseInt($(ele).children(".price").text());
                //保留两位小数
                $(ele).children(".sum").text("￥"+(money*count).toFixed(2));
            });
            $("tr .sum").each(function (i, ele) {
                //截取￥
                sum_price += parseFloat($(ele).text().substr(1));
            })
            //计算出所有商品的总价格
            $("p").text("订单总金额："+sum_price.toFixed(2)+"￥");
        }
    //    结算
        $(".settlement").on({
            click: function () {
                var final_price = 0;
                // 找出所有checked
                $(".select_one").each(function (i,e) {

                   if ($(this).prop('checked')){
                        //转为float并截取后计算选中的总价格
                        final_price += parseFloat($(this).parent().siblings(".sum").text().substr(1));
                   }

               })
                alert("结算总额为："+final_price+"￥");
            }
        })
    });
</script>
</body>
</html>