原生js实现jQuery parentsUntil 和 closest方法

原生js实现jQuery parentsUntil 和 closest方法| 子项。| 品牌。| 销售单价。| 开票申请中。| 可开票。| SOP。| 成sir。附送 apply call的小技巧

大家好,欢迎来到IT知识分享网。

需求很简单,如下图:点击表格内每行的删除按钮时删除该行

原生js实现jQuery parentsUntil 和 closest方法

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <style>
        *{margin:0;padding:0;}
        .box-content{width:1000px;padding:10px;margin:10px auto;background:rgba(199, 237, 204, 1);font-size:12px;}
        .box-main{padding:10px;background:#ffff;}
        .box-hd{line-height:22px;}
        .box-title{font-size:14px; font-weight:600;color:#323232;}
        .table-fixed{table-layout:fixed;border-spacing:0;border-collapse:collapse;}
        .table-fixed th{height:30px;background:#b4e0a3;box-sizing:border-box;}
        .table-fixed th,
        .table-fixed td{font-weight:normal;padding:0;margin:0;line-height:16px;padding:3px 0 3px 4px;border:1px solid #a0e08e;text-align:left;word-break:break-all;}
        .input{padding:0 4px;height:18px;border:1px solid #ddd;}
        .input-60{width:50px;}
        .tip{margin-top:5px;color:#f00;}
    </style>
</head>
<body>
    <div class="box-content">
        <div class="box-main">
            <h2 class="box-title">开票清单</h2>
            <table class="table table-fixed" id="table">
                <tr>
                    <th width="80">销售型号ID</th>
                    <th width="118">子项</th>
                    <th width="70">品牌</th>
                    <th width="70">销售单价</th>
                    <th width="60">销售数量</th>
                    <th width="70">已开票</th>
                    <th width="70">开票申请中</th>
                    <th width="70">可开票</th>
                    <th width="70">本次开票</th>
                    <th width="70">本次开票额</th>
                    <th width="120">订单号</th>
                    <th width="70">客户联系人</th>
                    <th width="40">操作</th>
                </tr>
                <tr class='tr-item'>
                    <td>188888</td>
                    <td>123456789123456789</td>
                    <td></td>
                    <td></td>
                    <td>10000</td>
                    <td>1000</td>
                    <td>1500</td>
                    <td>1500</td>
                    <td><input class="input input-60" type="text" value="2500"></td>
                    <td>1500</td>
                    <td>SOP18122588888</td>
                    <td><a href="#">成sir</a></td>
                    <td><a href="#" class="del">删除</a></td>
                </tr>
                <tr class='tr-item'>
                    <td>288888</td>
                    <td>123456789123456789</td>
                    <td></td>
                    <td></td>
                    <td>10000</td>
                    <td>1000</td>
                    <td>1500</td>
                    <td>1500</td>
                    <td><input class="input input-60" type="text" value="2500"></td>
                    <td>1500</td>
                    <td>SOP18122588888</td>
                    <td><a href="#">成sir</a></td>
                    <td><a href="#" class="del">删除</a></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>4500</td>
                    <td>1500</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <p class="tip">*本次开票数量不能为空!</p>
        </div>
    </div>
    <script>
        function queryElement(node,selectScope){
            d = !selectScope ? document : selectScope;
            if(/\./.test(node)){
                node = node.replace('.','');
                //HTMLcollection 伪数组
                node = d.getElementsByClassName(node);
            }else if(/\#/.test(node)){
                node = node.replace('#','');
                //HTML元素
                node = d.getElementById(node);
            }else{
                //HTMLcollection 伪数组
                node = d.getElementsByTagName(node);
            }
            return node;
        }

        function closest(node,parent){
            if(parent){
                parent = queryElement(parent);
                while(node.nodeType !== 9){
                    node = node.parentNode;
                    // class tagName时判断伪数组中是否存在该node元素
                    // id时判断是否相等
                    if([].indexOf.call(parent,node) >= 0 || node === parent){
                        return node;
                    }
                }
            }
            return null;
        }

        function parentsUntil(node,parent,isIncludeParent){
            if(parent){
                parent = queryElement(parent);
                var arr = [];
                while(node.nodeType !== 9){
                    var tempNode = isIncludeParent ? node : node.parentNode;
                    // class tagName时判断伪数组中是否存在该node元素
                    // id时判断是否相等
                    var nowIsParent = [].indexOf.call(parent,tempNode) >=0 || tempNode === parent;
                    if(nowIsParent){
                        break;
                    }
                    node = node.parentNode;
                    arr.push(node);
                }
                return arr;
            }
            return null;
        }
        // closest 调用
        var del = queryElement('.del');
        [].forEach.call(del,function(item){
            item.onclick = function(e){
                var p = closest(this,'tr');
                p.parentNode.removeChild(p);
                e.preventDefault();
            }
        });

        // parentsUntil 测试调用
        var tip = queryElement('.tip')[0];
        var parents  = parentsUntil(tip,'.box-content',true);
        Array.prototype.forEach.call(parents,function(item){
            item.style.borderLeft = '2px solid #ff0000';
        });
    </script>
</body>
</html>

附送 apply call的小技巧。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/46701.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信