zoukankan      html  css  js  c++  java
  • html中删除表格的一行(有弹窗)

    html中删除表格一行其实很简单,但是加上一个提示弹窗后,点击确定后却获取不到要删除的是哪一行,下面是一个demo

    html:

    <tr>
    							<td>
    								<input type="checkbox" class="checkBig" />
    							</td>
    							<td>安徽车乐优</td>
    							<td>13888888888</td>
    							<td>安徽省合肥市政务区金寨路与潜山路交口金潜广场</td>
    							<td>门店</td>
    							<td>
    								<div class="opo">
    									<div class="modify">修改</div>
    									<div class="delete"  onclick="shanchu(this)">删除</div>
    								</div>
    							</td>
    						</tr> 

    弹窗:

    <!--删除-->
    		<div class="delcon">
    			<div class="desure">确认删除?</div>
    			<div class="delfoot">
    				<div class="delcer">确认</div>
    				<div class="delcan">取消</div>
    			</div>
    		</div>

    弹窗css:

    .delcon{
    	 30%;
    	overflow: hidden;
    	background: #fff;
    	box-sizing: border-box;
    	border: 5px solid #3eb4c5;
    	position: fixed;
    	left: 33%;
    	top: 20%;
    	z-index: 999;
    	display: none;
    }
    .desure{
    	 100%;
    	height: 35px;
    	line-height: 35px;
    	text-align: center;
    	margin-top:45px;
    	margin-bottom: 30px;
    }
    .delfoot{
    	 100%;
    	height: 35px;
    	margin-bottom: 20px;
    }
    .delcer{
    	float: left;
    	margin-left: 20%;
    	 80px;
    	height: 35px;
    	line-height: 35px;
    	text-align: center;
    	color: #fff;
    	font-size: 12px;
    	font-weight: 700;
    	background: #3eb4c5;
    	cursor: pointer;
    }
    .delcan{
    	float: left;
    	margin-left: 15%;
    	 80px;
    	height: 35px;
    	line-height: 35px;
    	text-align: center;
    	color: #383838;
    	font-size: 12px;
    	/*font-weight: 700;*/
    	box-sizing: border-box;
    	border:1px solid #C3C3C3
    	 /*background: #3eb4c5;*/;
    	cursor: pointer;
    }
    

      js;

    //删除
    		function shanchu (obj){
    			$('.delcon').fadeIn()
    //			//确定
    			$('.delcer').click(function(event){
    				$(obj).parent().parent().parent().remove();
    				$('.delcon').fadeOut()	
    			})
    			//取消
    			$('.delcan').click(function(event){
    				$('.delcon').fadeOut()	
    			})
    		}
    

      

  • 相关阅读:
    异常:This application has no explicit mapping for /error, so you are seeing this as a fallback.
    【IntelliJ IDEA】使用idea解决新建jsp文件而找不到jsp文件模版的新建选项
    SpringBoot 上传附件
    SpringBoot访问资源文件
    springboot 整合 listener
    SpringBoot 整合 filter
    Hello_SpringBoot_demo
    springBoot 整合servlet
    RROR:o.s.b.d.LoggingFailureAnalysisReporter解决办法
    使用IDEA创建一个springboot项目
  • 原文地址:https://www.cnblogs.com/xinheng/p/9679122.html
Copyright © 2011-2022 走看看