jQuery 表格中实现“删除线”的增进方法
之前做了一个删除线的效果，就是类似这样的，在内容的中间加一条线。 但是又有点不同的是，这种删除线不是单纯的在文字之上，而是给一个Table中的一行加上这种删除线效果。
这里有两个方法，是在不同时期写的，第一个有些缺陷，第二个在第一个基础上要好很多，目前没有发现什么缺陷吧。
直接上代码吧
页面内容：
<body>
<table style="border:1px solid black;padding-left:5px;padding-right:5px;" cellpadding="10%" rules="cols">
<tr style="border-bottom:1px solid;color:#fff">
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>球队</th>
<th>球衣号码</th>
<th>位置</th>
<th>身高</th>
<th>体重</th>
<th>简介</th>
<th>操作</th>
</tr>
<tr>
<td><span>1</span></td>
<td>乔丹</td>
<td> </td>
<td>芝加哥公牛队</td>
<td>23</td>
<td>得分后卫</td>
<td>198公分</td>
<td> </td>
<td><input type='text' style="width:200px" /></td>
<td><input type='button' value="删除" style="width:50px" /></td>
</tr>
<tr>
<td><span>2</span></td>
<td>科比</td>
<td> </td>
<td>洛杉矶湖人队</td>
<td>24</td>
<td>得分后卫</td>
<td>198公分</td>
<td> </td>
<td><input type='text' style="width:200px" /></td>
<td><input type='button' value="删除" style="width:50px" /></td>
</tr>
<tr>
<td><span>3</span></td>
<td>詹姆斯</td>
<td> </td>
<td>克里夫兰骑士队</td>
<td>23</td>
<td>小前锋</td>
<td>203公分</td>
<td> </td>
<td><input type='text' style="width:200px" /></td>
<td><input type='button' value="删除" style="width:50px" /></td>
</tr>
<tr>
<td><span>4</span></td>
<td>杜兰特</td>
<td> </td>
<td>俄克拉荷马雷霆队</td>
<td>35</td>
<td>小前锋</td>
<td>210公分</td>
<td> </td>
<td><input type='text' style="width:200px" /></td>
<td><input type='button' value="删除" style="width:50px" /></td>
</tr>
<tr>
<td><span>5</span></td>
<td>保罗</td>
<td> </td>
<td>洛杉矶快船队</td>
<td>3</td>
<td>控球后卫</td>
<td>188公分</td>
<td> </td>
<td><input type='text' style="width:200px" /></td>
<td><input type='button' value="删除" style="width:50px" /></td>
</tr>
</table>
</body>
页面效果：
jQuery代码（第一次）：
<script type="text/javascript">
$(function(){
//添加tr背景色
$("table tr:first").css("background-color","#696969");
$("table tr:even").not("table tr:first").css("background-color","#98F5FF");
$("table tr:odd").css("background-color","#90EE90");
//删除按钮点击事件
$("input[type='button']").click(function(){
$(this).parent().parent().line();
}); }) $.fn.line = function () {
return $(this).children("td").each(function (index) {
$(this).children().attr("disabled", "disabled").children().attr("disabled", "disabled");
if (index == 0) {//重点部分
var t = $(this).offset().top + $(this).height();//1、获得对应行，第一列相对于浏览器顶部的位移
var l = $(this).offset().left;//2、获得对应行，第一列相对于浏览器左侧的位移
var w = $(this).parent("tr").width();//3、获得对应行的宽度
$(this).children("*:last").after("<div style='outline:#000 solid 1px; position:absolute; left:" + l + "px;top:" + t + "px;width:" + w + "px;'></div>");//4
}
});
}
</script>
点击删除按钮效果如下:
jQuery代码（第二次）：
主要就是修改了line方法里的内容
$.fn.line = function () {
return $(this).children("td").each(function (index) {
$(this).children().attr("disabled", "disabled").children().attr("disabled", "disabled");
if (index == 0) {//重点部分
$(this).children("*:first").before("<div style='position:absolute;width:100%;padding-top: 12px;'><div style='outline:#000 solid 1px; width:96%;'></div></div>");//5
}
});
点击删除按钮效果如下:
大家有没有发现，做了一些小改动，不同点就在于line方法中加的动态浮动div的形态。从界面显示可能不太看出来，大家会觉得都差不多啊，而且细心的朋友会发现，第二次的删除线已经延伸到了表格之外，有些不好看，这块的修改方法大家可以把width:100%改成该表格确切的宽度值，这里之所以用width:100%是因为之前的项目中用的是一个iframe标签包着的，用这个属性，效果要好很多，因为当浏览器放大，缩小的时候，这条删除线会随着实际情况拉长和缩短。
当然，第二次的删除线不只是在这方面上比第一次的有优势，更重要的是因为，第二次的浮动不依赖于其他条件。所谓的其他条件是什么？比如，因为第一个里面用到了相对位移的东西，所以如果当含有删除线的这个table在页面最初加载时是隐藏状态的（有可能的，如果tab标签里不是第一个）。根本就取不到相对位移的值，这样就会出错。
再比如，用js想做一个打印页面的功能时，你需要读取原页面的html元素，把其放在打印窗口中，但是此时的删除线的相对位移就不是针对打印窗口而言了，所以基本也都会出错。
而第二次的删除线就完全不用考虑相对位移的问题了，当其插入每一行表格的第一列之后，绝对定位，脱离原来的文档流，调整一下上内边距，就有一个元素块在这一行上，然后里面包一个“线”就OK了。
这里其实css的东西是关键点，主要也不是专业写这些的，所以费了点劲，通过文章来记录一下。
DEMO下载地址：http://files.cnblogs.com/zhouhongyu1989/%E5%88%A0%E9%99%A4%E7%BA%BFDemo.rar
jQuery 表格中实现“删除线”的增进方法的更多相关文章
- jQuery根据元素值删除数组元素的方法
http://www.jb51.net/article/68349.htm 本文实例讲述了jQuery根据元素值删除数组元素的方法.分享给大家供大家参考.具体如下: 例如删除C这个元素 ,前提不知道C ...
- 如何使用poi在word表格中插入行的4种方法
本文记录了,在word表格中插入新行的几种方法.直接上代码说明 table.addNewRowBetween 没实现,官网文档也说明,只有函数名,但没具体实现,但很多文章还介绍如何使用这个函数,真是害 ...
- jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍Eas ...
- [转帖]Windows7/2008中批量删除隧道适配器的方法
https://www.jb51.net/os/windows/479838.html 客户现场的硬件信息总是发生变化 这里查找一下资料 尝试一下. 1.在网卡属性的“网络”中,将“Internet协 ...
- Python的list循环遍历中，删除数据的正确方法
在遍历list,删除符合条件的数据时,总是报异常,代码如下: num_list = [1, 2, 3, 4, 5] print(num_list) for i in range(len(num_lis ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）
主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...
- jQuery常用方法一览及JQuery选择器获取表格中按钮所在行的其他列值
Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...
- ag-grid 表格中添加图片
ag-grid是一种非常好用的表格,网上搜索会有各种各样的基本用法,不过对于在ag-grid 表格中添加图片我没有找到方法,看了官方的文档,当然英文的自己也是靠网页翻译,最后发现有这么一个例子,我知道 ...
随机推荐
- K - 欧拉回路(并查集)
点击打开链接 K - 欧拉回路 欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input 测试输入包含若干测试用例.每个测试用例的第 ...
- video视频内容填充整个播放空间方法
关于video视频内容填充整个播放空间方法一般上传的视频都没法占满video,看起来很不美观,解决办法很简单video{ object-fit:fill;}
- 【文文殿下】后缀自动机(Suffix Automaton,SAM)学习笔记
前言 后缀自动机是一个强大的数据结构,能够解决很多字符串相关的(String-related)问题. 例如:他可以查询一个字符串在另一个字符串中出现的所有子串,以及查询一个字符串中本质不同的字符串的个 ...
- django 结合 OPTIONS方法 处理跨域请求(单个视图方法中)
OPTIONS 方法比较少见,该方法用于请求服务器告知其支持哪些其他的功能和方法.通过 OPTIONS 方法,可以询问服务器具体支持哪些方法,或者服务器会使用什么样的方法来处理一些特殊资源.可以说这是 ...
- Docker的安装与启动教程
一.安装Docker Docker官方建议在Ubuntu中安装,因为Docker是基于Ubuntu发布的,而且一般Docker出现的问题Ubuntu是最先更新或者打补丁的.在很多版本的CentOS中是 ...
- Wireshark系列（从入门到精通的10个干货）
Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用WinPCAP作为接口,直接与网卡进 ...
- Elasticsearch基础知识
ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口Elasticsearch是用Java开发的,并作为Apache ...
- [Objective-C语言教程]指针（15）
Objective-C中的指针简单易学.使用指针可以更轻松地执行某些Objective-C编程任务,并且在不使用指针的情况下无法执行其他任务(如动态内存分配). 所以有必要学习指向成为一个完美的Obj ...
- 部署LVS-NAT群集
案例环境 LVS调度器作为Web服务器池的网关,LVS两块网卡,分别连接内外网,外网地址172.16.16.172.24,同时也作为整个群集的VIP,内网地址为192.168.7.21-24/24,是 ...
- 空行会影响 Java 编译吗？
简评:往往越简单的问题越容易被人们忽略. 问题 这个月的 Stack Overflow 有篇热门文章是国外有位开发者提出: 当我仅仅对 Java 类增加了一行空行,为什么编译后得到了两个不同的字节码文 ...