DOM综合查询

最新推荐文章于 2022-04-11 19:36:08 发布
是欢欢啊
最新推荐文章于 2022-04-11 19:36:08 发布
阅读量75
点赞数
分类专栏： JS相关 JS demo
本文链接：https://blog.csdn.net/bznhlhh/article/details/116705112
版权
JS相关同时被 2 个专栏收录
42 篇文章 0 订阅
订阅专栏
JS demo
28 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM综合查询</title>
</head>
<style>
    .w1200 {
        width: 1200px;
        margin: 200px auto;
    }
    .title {
        margin-bottom: 20px;
    }
    .title button {
        margin-right: 10px;
    }
    table {
        width: 1200px;
    }
    td {
        text-align: center;
    }
    td button {
        margin-right: 10px;
    }
    .wrapper {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 999;
      display: none;
    }

    .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 1000;
      width: 400px;
      height: 300px;
      box-shadow: 0px 0px 10px #ccc;
      padding: 5px;
      background-color: white;
    }
    /*遮罩层*/

    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 999;
      background-color: rgba(0, 0, 0, 0.1);
    }
    input {
        outline: none;
        margin-top: 10px;
    }
    .wrapper button {
        margin-top: 20px;
        margin-right: 10px;
    }
</style>
<body>
    <div class="w1200">
        <div class="wrapper">
            <div class="content">
              商品名称：<input type="text" class="pname"><br>
              价格：
              <input type="text" class="pprice"><br>
              是否上架：
              <input type="checkbox" class="pup"><br>
              创建时间：
              <input type="date" class="pdate"><br>
              <button class="addBtn">确认新增商品</button>
              <button id="cancle">取消</button>
            </div>
            <div class="mask"></div>
          </div>
        <div class="title">
            <button class="addProduct">新增商品</button>
            <button class="print">打印选中的商品名称</button>
            <button id="pldel">批量删除</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" name="" id="all"></th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>是否上架</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>


        <div class="select">您选择的商品是：<span class="selected"></span></div>
    </div>
    
</body>
<script language="javascript">
    var data = [
    {id:1001,phone:"苹果",price:"3000",isUp:"是",date:"2019-1-2"},
    {id:1002,phone:"华为",price:"2000",isUp:"否",date:"2020-3-4"},
    {id:1003,phone:"小米",price:"2020",isUp:"是",date:"2021-2-15"},
];

window.onload = function(){
    showData();
    
    function showData(){
        var tbody = document.querySelector("table").querySelector("tbody");
        var isUpTxt = "上架";
        var trHtml = '';
        for (let i = 0; i < data.length; i++){
            isUpTxt = data[i].isUp=="是"?"下架":"上架"

            // console.log(isUpTxt)
            
            trHtml += '<tr data-id = ' + data[i].id + '>'+
                '<td><input type="checkbox" class="check"></td>'+
                '<td>' + data[i].phone + '</td>'+
                '<td>' + data[i].price + '</td>'+
                '<td>' + data[i].isUp + '</td>'+
                '<td>' + data[i].date + '</td>'+
                '<td>'+
                    '<button class="xiajia">'+isUpTxt+'</button>'+
                    '<button class="del">删除</button>'+
                '</td>'+
            '</tr>'
            // console.log(data[i].date)
        }
        tbody.innerHTML = trHtml;

        // 全选
        var allCheck = document.getElementById("all");
        var checkItems = document.querySelectorAll(".check");
        allCheck.onclick = function(){
            for(var i = 0; i<checkItems.length;i++) {
                checkItems[i].checked = allCheck.checked;
            }
        }

        // 判断是否全部都选中
        for(var j = 0;j<checkItems.length;j++){
            checkItems[j].onclick = function(){
                allCheck.checked = true;
                for(var k=0;k<checkItems.length;k++){
                    if(checkItems[k].checked == false){
                        allCheck.checked = false;
                    }
                }
            }
        }

        // 上下架
        var xiazai = document.querySelectorAll(".xiajia");
        for(var i=0;i<xiazai.length;i++){
            xiazai[i].onclick =function(){
                var tr = this.parentNode.parentNode;
                var id = tr.getAttribute("data-id");
                for(var j=0;j<data.length;j++){
                    if(data[j].id == id){
                        if(data[j].isUp == "是"){
                            data[j].isUp = "否";
                            showData();
                        }else{
                            data[j].isUp = "是";
                            showData();
                        }
                    }
                }
            }
        }  

        //批量删除
        var pldel = document.getElementById("pldel");
        var all = document.getElementById("all");
        pldel.onclick =function(){
            var checkItems = document.querySelectorAll(".check");
            for(var i=0;i<checkItems.length;i++){
                if(checkItems[i].checked == true){
                    var tr = checkItems[i].parentNode.parentNode;
                    var id = tr.getAttribute("data-id");
                    for(var j=0;j<data.length;j++){
                        if(data[j].id == id){
                            data.splice(j,1);
                            
                        }
                    }
                }
            }
            all.checked = false;
            showData();
        }
        
        
        //点击弹出遮罩层
        var addProduct = document.querySelector(".addProduct");
        var cancles = document.getElementById("cancle");
        var wrapper = document.querySelector(".wrapper");
        addProduct.onclick = function(){
            // alert(12345)
            wrapper.style.display = "block";
        }
        cancles.onclick = ()=>{
            wrapper.style.display = "none";
        }

        // 获取添加商品的属性节点
        var pname = document.querySelector(".pname");
        var pprice = document.querySelector(".pprice");
        var pup = document.querySelector(".pup");
        var ptime = document.querySelector(".pdate");
        var addBtn = document.querySelector(".addBtn");
        addBtn.onclick = function(){
            var id = 1000;
            if(data.length !== 0){
                id = data[data.length-1].id + 1;
                console.log(id);
            }
            var newObj = {
                id:id,
                phone: pname.value,
                price: pprice.value,
                isUp: pup.checked ? "是" : '否',
                date:ptime.value
            }
            if(newObj.id == ""||newObj.phone == ""||newObj.price == ""||newObj.date == ""){
                alert("请将信息填写完整！");
            }else {
                data.push(newObj);
                id = pname.value = pprice.value = ptime.value = "";
                pup.checked = false;
                wrapper.style.display = "none";
            }
            
            showData()
        }

        //打印商品名称
        var print = document.querySelector(".print");
        // var select = document.querySelector(".select");
        var selected = document.querySelector(".selected");
        print.onclick = function(){
            for(var i=0;i<data.length;i++){
                if(checkItems[i].checked == true){
                    var that = checkItems[i];
                    var tr = that.parentNode.parentNode;
                    var txt = data[i].phone;
                    selected.innerHTML = txt;
                    showData();
                }    
            }
        }

        //删除
        var del = document.querySelectorAll(".del");
            for(var i=0;i<=del.length;i++){
                del[i].onclick = function(){
                    var tr = this.parentNode.parentNode;
                    var id = tr.getAttribute("data-id");
                    for(var j=0;j<data.length;j++){
                        if(data[j].id == id) {
                            data.splice(j,1);
                            showData();
                        }
                    }
                    console.log(i)
                }
            }   
        
        
    };
    
}
    
</script>
</html>