原生js实现jQuery parentsUntil 和 closest方法

最新推荐文章于 2022-12-05 18:02:15 发布

wx_lidysun

最新推荐文章于 2022-12-05 18:02:15 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/lidysun/article/details/88825553

版权

Javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

需求很简单，如下图：点击表格内每行的删除按钮时删除该行
原生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的奇淫技巧。

wx_lidysun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现jQuery parentsUntil 和 closest方法

需求很简单，如下图：点击表格内每行的删除按钮时删除该行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo2</title> <style> *{margin:0;paddin...
复制链接

扫一扫