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{
width: 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{
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
margin-top:45px;
margin-bottom: 30px;
}
.delfoot{
width: 100%;
height: 35px;
margin-bottom: 20px;
}
.delcer{
float: left;
margin-left: 20%;
width: 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%;
width: 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()
})
}
html中删除表格的一行(有弹窗)的更多相关文章
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- 利用jquery动态添加和删除表格的一行,并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- js实现在表格中删除和添加一行
<!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...
- VBA删除表格最后一行
Sub 删除最后一行() If MsgBox("要为所有表格添加列吗?", vbYesNo + vbQuestion) = vbYes Then To ActiveDocument ...
- dtgrid 手动条件删除表格中的某一行
dtgrid 手动条件删除表格中的某一行 var grid = $.fn.DtGrid.init(dtGridOption); $(function () { grid.load(); }); fun ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript
需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...
- Java 获取、删除Word文本框中的表格
本文介绍如何来获取Word文本框中包含的表格,以及删除表格. 程序测试环境包括: IDEA JDK 1.8.0 Spire.Doc.jar 注:jar导入,可通过创建Maven程序项目,并在pom.x ...
- js动态向页面中添加表格
我们在实际开发中经常会想要实现如下情况: 点击某个按钮,然后动态的网页面里面添加一个表格或者一行,这个更加灵活方便.但是实现起来肯定不能像在页面里面直接写标签来的容易,以下是我项目中的代码,拿过来分享 ...
随机推荐
- 数据中心网络中的40GBASE-T
数据中心网络基础设施正在见证由不断增长的带宽和网络性能需求推动的变革.10 千兆位以太网是当今数据中心的实际标准,而 40G 以太网的采用率越来越高.虽然 40G 以太网标准已存在于 SM 光纤和基于 ...
- OpenGL_构建GLFW与第一个程序
参考教程:https://learnopengl-cn.github.io/ 这个教程已经给出了很详细的资料,当然我这里是对细节的展示(在Windows上). 首先,你需要准备 VS2017 : ht ...
- VS2017:"64位调试操作花费的时间比预期要长",无法运行调试解决办法
关于这个问题网上搜了好久,参考http://www.yishimei123.com/network/685.html这篇文章,最后终于解决了,在此表示非常感谢! 我的环境是:win10+VS2017 ...
- 代码: 0x80131500 win10应用商店崩溃了
网上搜索大部分认同的结果如下 1.打开“运行”输入 inetcpl.cpl (“WINDOWS”+“R”键,输入 inetcpl.cpl亦可) 2.点开高级往下拉,勾上"使用TLS 1.2& ...
- MSF魔鬼训练营-3.3.2 口令猜测与嗅探
密码暴力破解以SSH为例,其他协议方法类似 SSH msf > use auxiliary/scanner/ssh/ssh_login msf auxiliary(ssh_login) ...
- 【STM32】NVIC中断优先级管理
(1)NVIC中断优先级分组 1>,CM4内核支持256个中断,其中包含了16个内核中断和240个外部中断,并且 具有256级的可编程中断设置. 2>,STM32F4并没有使用CM4的内核 ...
- PTA(Basic Level)1087.有多少不同的值
当自然数 n 依次取 1.2.3.--.N 时,算式 ⌊n/2⌋+⌊n/3⌋+⌊n/5⌋ 有多少个不同的值?(注:⌊x⌋ 为取整函数,表示不超过 x 的最大自然数,即 x 的整数部分.) 输入格式: ...
- 设计模式在 Spring 框架中的良好应用
在开始正文之前,请你先思考几个问题: 你项目中有使用哪些 GOF 设计模式 说一说 GOF 23 种设计模式的设计理念 说说 Spring 框架中如何实现设计模式 假设我是面试官问起了你这些面试题,你 ...
- nginx反向代理_负载均衡
注意ip地址为: 虚拟机ip设置 TYPE="Ethernet"BOOTPROTO="static"NAME="enp0s3"DEVICE= ...
- @Select 数据表的字段与实体类的属性值
添加@Results @Select("select * from goods") @Results({ @Result(property = "id", co ...