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中删除表格的一行(有弹窗)的更多相关文章

  1. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  2. 利用jquery动态添加和删除表格的一行,并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

  3. js实现在表格中删除和添加一行

    <!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...

  4. VBA删除表格最后一行

    Sub 删除最后一行() If MsgBox("要为所有表格添加列吗?", vbYesNo + vbQuestion) = vbYes Then To ActiveDocument ...

  5. dtgrid 手动条件删除表格中的某一行

    dtgrid 手动条件删除表格中的某一行 var grid = $.fn.DtGrid.init(dtGridOption); $(function () { grid.load(); }); fun ...

  6. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  7. 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

    需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...

  8. Java 获取、删除Word文本框中的表格

    本文介绍如何来获取Word文本框中包含的表格,以及删除表格. 程序测试环境包括: IDEA JDK 1.8.0 Spire.Doc.jar 注:jar导入,可通过创建Maven程序项目,并在pom.x ...

  9. js动态向页面中添加表格

    我们在实际开发中经常会想要实现如下情况: 点击某个按钮,然后动态的网页面里面添加一个表格或者一行,这个更加灵活方便.但是实现起来肯定不能像在页面里面直接写标签来的容易,以下是我项目中的代码,拿过来分享 ...

随机推荐

  1. FastAdmin-T

    FastAdmin 注意食用姿势,建议先通读官方文档一次,在看 根据环境及配置的不同,仅作参考 修改mysql表注释ALTER TABLE student COMMENT '学生表'; fastadm ...

  2. Python面试-websocket及web框架

    一.Websocket 1. websocket概念 在讲websocket之前,我们先来看看ajax轮询和long poll的实现机制. A.  ajax轮询 ajax轮询的原理非常简单,让浏览器隔 ...

  3. 【POJ - 3009】Curling 2.0 (dfs+回溯)

    -->Curling 2.0 直接上中文 Descriptions: 今年的奥运会之后,在行星mm-21上冰壶越来越受欢迎.但是规则和我们的有点不同.这个游戏是在一个冰游戏板上玩的,上面有一个正 ...

  4. fio 硬盘测试工具

    一.windows环境 1. 安装fio:http://www.bluestop.org/fio/ 可以选择不同版本的安装,安装后在C:\Program Files\fio目录中可以找到fio的执行程 ...

  5. 【Spring 源码】Spring 加载资源并装配对象的过程(XmlBeanDefinitionReader)

    Spring 加载资源并装配对象过程 在Spring中对XML配置文件的解析从3.1版本开始不再推荐使用XmlBeanFactory而是使用XmlBeanDefinitionReader. Class ...

  6. Java 虚拟机的运行模式

    这几天在读周志明老师的<深入理解JVM虚拟机> 讲到了 java的运行模式, 有mixed 模式 interpret模式还有compile模式.效果如下面所示 java -version ...

  7. Go语言中的数组(九)

    我刚接触go语言的数组时,有点不习惯,因为相对于JavaScript这样的动态语言里的数组,go语言的数组写起来有点不爽. 定义数组 go语言定义数组的格式如下: ]int var 数组名 [数组长度 ...

  8. CF949E Binary Cards 题解

    题面 首先发现:一个数最多会出现1次: 然后深入推出:一个数不会既用它又用它的相反数: 这样就可以依次考虑每一位了: 如果所有的数都不含有这一位,那么就直接把所有的数除以2 如果含有,那么就减去这一位 ...

  9. C++学习 之 类的继承中的虚函数(笔记)

    1.多态行为 多态是面向对象语言的一种特征,让我们能够以类似的方式处理不同类型的对象.在C++中我们可以通过继承层次结构实现子类型多态. 我们可以通过下面的代码进一步了解多态: #include< ...

  10. 106、Label 控制 Service的位置 (Swarm13)

    参考https://www.cnblogs.com/CloudMan6/p/8038799.html   上一节我们讨论了 Service部署的两种模式,global mode 和 replicate ...