jQuery 查找父元素

function deletesec1Div5(obj){    $(obj).closest(".sec1-div5").remove();}

自己写的一段代码，实现了table中的全选，反全选，删除功能。HTML代码如下：

<section class="sec1 container"><!--请假管理---><div class="row container-fluid sec1-head"><h4 class="col-lg-6 ">学生请假明细表</h4><div class="col-lg-6"><!--<div class="myfont1 close1 pull-right"></div>--><div class="myfont1  down-arrow  pull-right"></div></div></div><div class="container sec1-Sch"><!--搜索框---><div class="row"><div class="col-lg-4"><a href="add_leaveInfo.html" class="btn btn1">添加请假信息+</a></div><div class=" sec1-search col-lg-8 "><span class="myfont1 sec1-search-icon pull-right"></span><input type="text" placeholder="学号..." class="form-control sec1-input pull-right"/><input type="text" placeholder="学生姓名..." class="form-control sec1-input pull-right"/><span class="pull-right">搜索：</span></div></div></div><div class="container"><div class="row"><div class="table-responsive"><table class="table table-striped table-bordered "><tr><th>学号</th><th>姓名</th><th>性别</th><th>班级</th><th>请假日期</th><th>销假日期</th><th>请教事由</th><th>备注</th><th>选择</th></tr><tr><td>20160101</td><td>李常茹</td><td>女</td><td>小一班</td><td>2016.10.10</td><td>2016.10.11</td><td>病假</td><td>学生妈妈打电话过来请假</td><td><input type="checkbox" class="sec2-checkBox"/></td></tr><tr><td>20160101</td><td>叱云南</td><td>男</td><td>小一班</td><td>2016.10.10</td><td>2016.10.11</td><td>打游戏</td><td>学生妈妈打电话过来请假</td><td><input type="checkbox" class="sec2-checkBox"/></td></tr><tr><td>20160101</td><td>叱云柔</td><td>女</td><td>小一班</td><td>2016.09.10</td><td>2016.10.01</td><td>病假</td><td>学生妈妈打电话过来请假</td><td><input type="checkbox" class="sec2-checkBox"/></td></tr><tr><td>20160101</td><td>李长乐</td><td>女</td><td>小一班</td><td>2016.11.10</td><td>2016.11.11</td><td>病假</td><td>学生妈妈打电话过来请假</td><td><input type="checkbox" class="sec2-checkBox"/></td></tr></table></div><div class="row sec1-select"><!--<a href="#">全选</a><span>   </span><a href="#" >反全选</a><span>   </span><a href="#" >删除</a>--><div class="btn btn2" id="sec2-selectAll">全选</div><div class="btn btn2" id="sec2-Unselect">反全选</div><a href="add_leaveInfo.html" class="btn btn2">编辑</a><div class="btn btn2" id="sec2-Del">删除</div><div class="btn btn2">推送邮件</div><div class="btn btn2">导出</div></div><div class="row  sec1-page"><nav class="pull-right"><ul class="pagination"><li><a href="#">«</a></li><li><a href="#" class="sec1-pageActive">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">»</a></li></ul></nav></div></div></div>
</section>

　　CSS代码如下：

<head lang="en"><meta charset="UTF-8"><title>考勤管理系统</title><link rel="stylesheet" href="dist/css/bootstrap.css"><style>body{font-family: 微软雅黑;background: #EFF0F4;}@font-face {font-family: myfont;src: url("font/iconfont.woff");}.myfont1{font-family: "myfont";font-size: 15px;}.title1{background: #EFF0F4;margin-top: 30px;margin-left: 10px;}.subtitle{background: none;}.title1 ul li a{color:#999999;}.title1 ul li a:hover{color: #4CC0C1;text-decoration: none;}.sec1{background: white;width:98%;border-radius: 4px;margin-left: 15px;margin-top: 20px;height:auto;}.down-arrow,.close1{display: inline-block;/*border:1px solid red;*/width:30px;height:30px;background:#E3E4E8 ;border-radius: 3px;line-height: 30px;text-align: center;margin-left: 6px;-webkit-transition: all linear .3s;}.down-arrow:hover{background: #4CC0C1;color:white;-webkit-transition: all linear .3s;}.close1:hover{background: #4CC0C1;color:white;-webkit-transition: all linear .3s;}.sec1-head{border-bottom: 1px dotted #999999;;margin-top: 10px;width: 99%;margin-left: 10px;}.sec1-search{/*border:1px solid red;*/display: inline-block;}.sec1-search>span{font-size: 16px;position: relative;top:5px;}.sec1-input{width: 30%;margin-left: 6px;-webkit-transition: all linear .3s;}.sec1-input:focus{width: 34%;-webkit-transition: all linear .3s;outline: black;}.sec1-search-icon{width:30px;height:30px;line-height: 30px;text-align: center;border-radius: 3px;background:#E3E4E8 ;margin-top: -3px;margin-left: 5px;-webkit-transition: all linear .3s;}.sec1-search-icon:hover{color:white;background: #4CC0C1;-webkit-transition: all linear .3s;}.btn1{color:white;background:#4CC0C1;border:none;/*margin-left: 20px;*/font-size: 16px;-webkit-transition: all linear .3s;}.btn1 a{color:white;text-decoration: none;}.btn2{color:white;background:#4CC0C1;border:none;font-size: 13px;-webkit-transition: all linear .3s;}.btn1:hover{background:#42aeb2 ;color: #fff;-webkit-transition: all linear .3s;}.btn2:hover{background:#42aeb2 ;color: #fff;-webkit-transition: all linear .3s;}.sec1-Sch{margin-top: 40px;margin-bottom: 30px;}.sec1-pageActive{background:#4CC0C1!important;color:#fff!important;}.sec1-page{/*border:1px solid red;*/margin-right: 2px;}.sec1-select{/*border:1px solid red;*/text-align: right;margin-right: 15px;margin-bottom: 10px;}</style>

JS代码如下：

<script src="dist/js/jquery-1.11.3.js"></script><script src="dist/js/bootstrap.js"></script>

<script>$(function(){//考勤中的全选和反全选$("#selectAll").click(function(){$(".sec1-checkBox").prop("checked",true);});$("#Unselect").click(function(){$(".sec1-checkBox").prop("checked",false)});
//考勤管理中的删除$("#sec1-Del").click(function () {$(".sec1-checkBox").each(function () {if ($(this).prop("checked")==true) {
//                    $(this).parent().parent().remove();
//                    console.log($(this).parent().parent());$(this).closest("tr").remove();}});});//请假管理中的全选和反全选$("#sec2-selectAll").click(function(){$(".sec2-checkBox").prop("checked",true);});$("#sec2-Unselect").click(function(){$(".sec2-checkBox").prop("checked",false)});
//请假管理中的删除$("#sec2-Del").click(function () {$(".sec2-checkBox").each(function () {if ($(this).prop("checked")==true) {
//                    $(this).parent().parent().remove();//这是查找父元素的另一种写法，和代码的结构有关$(this).closest("tr").remove();}});});})</script>

转载于:https://www.cnblogs.com/potato-lee/p/6183359.html

jQuery 查找父元素相关推荐

jQuery获取父元素及父节点的方法小结
这篇文章主要介绍了jQuery获取父元素及父节点的方法,结合实例形式总结分析了jQuery针对父元素及父节点操作的常用技巧,需要的朋友可以参考下本文实例总结了jQuery获取父元素及父节点的方法.分 ...
jquery 查找祖先元素_如何获得jQuery中元素的第一个祖先
jquery 查找祖先元素 In this post, we will discuss about the traversal method to get the first ancestor of ...
jquery 滚动到某个div_如何使用jQuery获取父元素
jQuery获取父元素我们有三种方式可以实现,.parent()..parents()..closest(),下面我们将介绍jQuery获取父元素的这三种方式以及一个具体的示例. web前端学习:打造 ...
Jquery查找父级添加样式
Jquery查找父级添加样式利用jQuery的parents()函数:试用前请先引入核心jQuery.js HTML结构首页样式加在的位置 ,navbar navbar-dropdown bg- ...
jquery获得当前元素父级元素_如何使用jQuery获取父元素
jQuery获取父元素我们有三种方式可以实现,.parent()..parents()..closest(),下面我们将介绍jQuery获取父元素的这三种方式以及一个具体的示例.web前端学习:打造全 ...
jquery获取父元素及祖先元素
标题jquery获取父元素及祖先元素 parent()方法和parents()方法都是获取父代元素,使用区别如下: parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 . ...
jquery查找父窗体id_js/jquery如何获取父窗口的元素？
展开全部取父窗32313133353236313431303231363533e58685e5aeb931333365643565口的元素方法: $(selector, window.parent. ...
Jquery找父元素，祖先，子元素，子孙，兄弟节点
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
jQuery 查找后代元素
通过jQuery children() 方法和jQuery find() 方法,我们可以向下遍历 DOM 树,查找后代元素. (1) jQuery children() 方法:返回被选元素的所有直接子 ...

jQuery 查找父元素

jQuery 查找父元素相关推荐

最新文章

热门文章