四川盐亭网站制作公司

jQuery表格中实现“删除线”的增进方法

之前做了一个删除线的效果，就是类似这样的，在内容的中间加一条线。 但是又有点不同的是，这种删除线不是单纯的在文字之上，而是给一个Table中的一行加上这种删除线效果。

为永登等地区用户提供了全套网页设计制作服务，及永登网站建设行业解决方案。主营业务为成都网站建设、网站设计、永登网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

这里有两个方法，是在不同时期写的，第一个有些缺陷，第二个在第一个基础上要好很多，目前没有发现什么缺陷吧。

直接上代码吧

页面内容：

	
		
			
				序号
				姓名
				年龄
				球队
				球衣号码
				位置
				身高
				体重
				简介
				操作
			
			
				1
				乔丹
				 
				芝加哥公牛队
				23
				得分后卫
				198公分
				 
				
				
			
			
				2
				科比
				 
				洛杉矶湖人队
				24
				得分后卫
				198公分
				 
				
				
			
			
				3
				詹姆斯
				 
				克里夫兰骑士队
				23
				小前锋
				203公分
				 
				
				
			
			
				4
				杜兰特
				 
				俄克拉荷马雷霆队
				35
				小前锋
				210公分
				 
				
				
			
			
				5
				保罗
				 
				洛杉矶快船队
				3
				控球后卫
				188公分
				 

页面效果：

jQuery 表格中实现“删除线”的增进方法

jQuery代码（第一次）：

        
            $(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("
");//4                     }                 });             }         

点击删除按钮效果如下:

jQuery 表格中实现“删除线”的增进方法

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("
");//5                     }                 });

 

点击删除按钮效果如下:

jQuery 表格中实现“删除线”的增进方法

大家有没有发现，做了一些小改动，不同点就在于line方法中加的动态浮动div的形态。从界面显示可能不太看出来，大家会觉得都差不多啊，而且细心的朋友会发现，第二次的删除线已经延伸到了表格之外，有些不好看，这块的修改方法大家可以把>

当然，第二次的删除线不只是在这方面上比第一次的有优势，更重要的是因为，第二次的浮动不依赖于其他条件。所谓的其他条件是什么？比如，因为第一个里面用到了相对位移的东西，所以如果当含有删除线的这个table在页面最初加载时是隐藏状态的（有可能的，如果tab标签里不是第一个）。根本就取不到相对位移的值，这样就会出错。

再比如，用js想做一个打印页面的功能时，你需要读取原页面的html元素，把其放在打印窗口中，但是此时的删除线的相对位移就不是针对打印窗口而言了，所以基本也都会出错。

而第二次的删除线就完全不用考虑相对位移的问题了，当其插入每一行表格的第一列之后，绝对定位，脱离原来的文档流，调整一下上内边距，就有一个元素块在这一行上，然后里面包一个“线”就OK了。

 

这里其实css的东西是关键点，主要也不是专业写这些的，所以费了点劲，通过文章来记录一下。

附件：http://down.51cto.com/data/2364816

网页标题：jQuery表格中实现“删除线”的增进方法
URL分享：http://scyanting.com/article/godhop.html

其他资讯