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>

  

												

jQuery 查找父元素的更多相关文章

  1. jquery查找父元素、子元素(个人经验总结)

    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...

  2. jQuery 查找父元素的函数 parent 和 parents 的区别

    函数 描述 parent([expr]) 查找子节点childNode的父节点,不包括祖先节点 parents([expr]) 查找子节点childNode的父节点,包括祖先节点 Talk is ch ...

  3. JQuery中查找父元素,子元素,追加元素,插入元素和删除元素 及其他常用方法

    Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...

  4. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

  5. 使用jquery获取父元素或父节点

    使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点   jquery获取父元素方法比较多,比如parent(),parents(),c ...

  6. jquery获取父元素或父节点的方法

    jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子: <ul class=" ...

  7. Jquery获取父元素

    jquery获取父元素 方法:parent(),parents(),closest() 栗子: <ul class="parent1"> <li><a ...

  8. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  9. JQuery 获取父元素方法

    ---恢复内容开始--- <tr class="removerow" style=""> <td> <input type=&qu ...

随机推荐

  1. 细数那些我们都习惯了的Java谣言

    我是一个Java的反对者,至于为什么,我想最大的一个原因是它不实在,不管是当年sun所说的一些言论,还是如今Java用户的一些言论,都有蛊惑之嫌,甚至很多太假了,而这些言论层出不穷,其实就语言本身我不 ...

  2. Java多线程开发系列之四:玩转多线程(线程的控制2)

    在上节的线程控制(详情点击这里)中,我们讲解了线程的等待join().守护线程.本节我们将会把剩下的线程控制内容一并讲完,主要内容有线程的睡眠.让步.优先级.挂起和恢复.停止等. 废话不多说,我们直接 ...

  3. Fiddler 常用文档

    时间飞逝,已经俩月有余没写东西了(本来写的就不多,(^▽^)),最近俩月的苦闷,此处省略 1W 字.... 闲言碎语不多讲,使用 Fiddler 有一小段时间了,今天在这里总结下,一来做个笔记,二来可 ...

  4. windows编程环境

    自行下载VS2010官方原版并破解你也可以从微软官方直接下载VS2010 正式版,然后自行破解.Microsoft Visual Studio 2010官方下载地址如下:页面:http://www.m ...

  5. h5动画效果总结

    一些常用的h5效果,自己总结的,用的时候直接拿,方便快捷! 1.悬浮时放大: .one{transition:All 0.4s ease-in-out;-webkit-transition:All 0 ...

  6. 一个前端引用Facebook评论插件案例

    最近公司海外的同事提了一个新的需求:那就是将Facebook的评论系统接入到公司海外网站的资讯详情页. 下面做一个简单的介绍: 首先我们登录到Facebook开发者平台:然后进入评论插件系统(http ...

  7. MOCK DATA -- node路由

    前后端分离,有时候后端接口给的不是很及时,这就需要前端自己mock data, 本文讲的简单的node模拟数据 api路由跳转 首先有个data.js(json)文件, 路由: 配置在dev-serv ...

  8. spring 在静态工具类中使用注解注入bean

    /** * @author: jerry * @Email: * @Company: * @Action: 日志处理工具类 * @DATE: 2016-9-19 */ @Component//泛指组件 ...

  9. 一个ubuntu phper的自我修养(杂记)

    ubuntu使用杂记 1.flatabulous安装使用. flatabulous是一个ubuntu图标主题. 使用它,必须得安装tweak插件. sudo add-apt-repository pp ...

  10. EntityFramework Core 学习笔记 —— 添加主键约束

    原文地址:https://docs.efproject.net/en/latest/modeling/keys.html Keys (primary) Key 是每个实体例的主要唯一标识.EF Cor ...