登录  /  注册
博主信息
博文 61
粉丝 1
评论 0
访问量 67683
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0513-JS操作购物车
我的博客
原创
741人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小案例: 多选或全选的功能实现</title>
    <style>
        /*表格与单元素添加边框*/
        table, th, td {
            border: 1px solid black;
        }
        /*设置表格样式, 折叠边框线并设置宽度*/
        table {
            border-collapse: collapse;
            width: 600px;
        }

        /*设置标题行背景*/
        table thead tr:first-of-type {
            background-color: lightblue;
        }

        /*选择每一行的第一列*/
        table tr td:first-of-type {
            text-align: center;
        }
    </style>
</head>
<body>
<table>
    <caption>购物车</caption>
    <thead>
        <tr>
            <th style="width: 30px;"><input type="checkbox" id="all"></th>

            <th>商品</th>
            <th>操作</th>

        </tr>
    </thead>


    <tbody>
        <tr>
            <td><input type="checkbox" name="user-select"></td>
            <td>华为HUAWEI MateBook 14 全面屏轻薄性能笔记本电脑</td>
            <td><button onclick="edit(this)">编辑</button> <button onclick="del(this)">删0</button></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="user-select"></td>
            <td>联想(Lenovo)拯救者Y7000英特尔酷睿i5 15.6英寸游戏笔记本电脑</td>
            <td><button onclick="edit(this)" name="ss">编辑</button> <button onclick="del(this)" >删1</button></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="user-select"></td>
            <td>小米 (MI)Ruby 2019款 15.6英寸金属轻薄笔记本电脑</td>
            <td><button onclick="edit(this)">编辑</button> <button onclick="del(this)">删2</button></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="user-select"></td>
            <td>Apple Macbook Pro 13.3[带触控栏]深空灰 </td>
            <td><button onclick="edit(this)">编辑</button> <button onclick="del(this)">删3</button></td>
        </tr>
    </tbody>
</table>
<!--用-链接,保证和CSS一样-->
<button id="del-all" disabled>全部删除</button>       
<input type="text" id="wupin" placeholder="请输入你需要的商品" style="width:300px;"> <button id="bat">提交</button>



<script>
    // 获取元素
    // 全选复选框
    var all = document.getElementById('all');
    // 全部商品列表复选框
    var checkboxes = document.getElementsByName('user-select');
    // 全部删除按钮
    var delBtn = document.getElementById('del-all');

    // 给全选复选框, 通过input事件, 添加全选功能
    all.addEventListener('input', getAll, false);

    // 全选事件的触发函数
    function getAll() {
        // 测试
        console.log(all.checked);

        // 如果用户点击了全选
        if (all.checked === true) {
            // 获取所有被选中的复选框, 并将其设置为选中状态
            Object.keys(checkboxes).forEach(function (key) {
                checkboxes[key].checked = true;
            });
            // 全部删除按钮有效
            delBtn.disabled = false;

        } else {    // 用户取消了全选
            // 还原所有行的复选框
            Object.keys(checkboxes).forEach(function (key) {
                checkboxes[key].checked = false;
            });
            // 全部删除按钮无效
            delBtn.disabled = true;
        }
    }

    // 全部删除事件
    delBtn.addEventListener('click', delAll, false);

    // 全部删除事件触发函数
    function delAll() {
        if (confirm('是否全部删除?')) {
                // 获取tbody
                var tbody = document.getElementsByTagName('table')[0].tBodies[0];
                // 将tbody 内容置空却可
                tbody.innerHTML = '';
                // 全部删除按钮无效
                delBtn.disabled = true;
                // 全选按钮还原
                all.checked = false;

            // 可选操作, 给用户一个提示,让用户再添加一些商品到购物车,增加成交率
            var p = document.createElement('p');
            p.style.color = 'red';
            p.innerText = '购物车啥也木有了, 赶紧添加一些吧!';
            document.body.appendChild(p);
        }

    }

    // 作业: 逐个删除功能, 如何添加与测试?



    //获取删除按钮的tr
    // var tr = document.getElementsByTagName('tr');
    //获取删除按钮
    // var del = document.getElementsByName('del');
    //做一个循环,判断用户点击了第几个按钮,然后删除他对应的内容。



 // 侦听添加项目
 //
 //    var bat=document.getElementById('bat');
 //    var wupin=document.getElementById('wupin');
 //    var edit = document.getElementsByClassName('edit');
 //
 //
 //            Object.keys(edit).forEach(function (index) {
 //
 //            var tb=document.getElementsByTagName('table').item(0).tBodies.item(0);
 //
 //                edit[index].addEventListener('click', function () {
 //
 //                    var tr1 = document.createElement('tr');
 //
 //                tr1.innerHTML+='<td>'+'<input type="checkbox" name="user-select">' +'</td>'+'<td>'+ 'aaaaaaaaaa' +'</td>'+'<td>'+'<button class="edit">编辑</button>'+'<button class="del">删除</button>' +'</td>';
 //                tb.append(tr1);
 //
 //            }, false);
 //                num+=1;
 //        });


 //添加项目
// var num=del.length;
//        bat.onclick=function () {
//                var tb=document.getElementsByTagName('table').item(0).tBodies.item(0);
//                    var tr1 = document.createElement('tr');
//                    tr1.innerHTML+='<td>'+'<input type="checkbox" name="user-select">' +'</td>'+'<td>'+ wupin.value +'</td>'+'<td>'+'<button class="edit">编辑</button>'+'<button name="del">删除</button>' +'</td>';
//                    tb.append(tr1);
//                     num+=1;
//                };


//删除项目1
//
//      Object.keys(del).forEach (function (value){
//          //console.log( del[value]);
//          del[value].addEventListener('click',function () {
//              this.parentNode.parentNode.innerHTML='';
//          },false);
//      });

//删除项目2 ,上下都可以实现

    /*
     for(var i=0;i<num;i++){

         var tt=del[i];
         tt.addEventListener('click',function(i){

             //checkboxes[i].checked = true;

             this.parentNode.parentNode.innerHTML='';
             alert('你点击了'+ del[i]);
         },false);
     }

*/
    //老师写的作业:

    // 作业: 逐个删除功能, 如何添加与测试?
    var tbody = document.getElementsByTagName('table').item(0).tBodies[0];

    // 删除
    function del(ele) {
        if (confirm('是否真的删除?')) {
            tbody.removeChild(ele.parentElement.parentElement);
        }
    }

    // 编辑
    function edit(ele) {
        var td = ele.parentElement.previousElementSibling; //获取他的兄弟元素。
        // 获取原始内容
        var oldContent = td.innerHTML;

        // 设置编辑对话框
        var  newContent = prompt('请输入新的内容:', oldContent);
        // 点击了确定
        if (newContent !== null) {
            td.innerHTML = newContent;
        } else {
            // null
            return false;
        }
    }


</script>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学