原生js实现jQuery parentsUntil 和 closest方法
需求很简单，如下图：点击表格内每行的删除按钮时删除该行
<html lang="en">
<head><meta charset="UTF-8"><title>demo2title><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">销售型号IDth><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>188888td><td>123456789123456789td><td>td><td>td><td>10000td><td>1000td><td>1500td><td>1500td><td><input class="input input-60" type="text" value="2500">td><td>1500td><td>SOP18122588888td><td><a href="#">成sira>td><td><a href="#" class="del">删除a>td>tr><tr class='tr-item'><td>288888td><td>123456789123456789td><td>td><td>td><td>10000td><td>1000td><td>1500td><td>1500td><td><input class="input input-60" type="text" value="2500">td><td>1500td><td>SOP18122588888td><td><a href="#">成sira>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>4500td><td>1500td><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的奇淫技巧。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！