大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
之前做了一个删除线的效果,就是类似这样的,在内容的中间加一条线。 但是又有点不同的是,这种删除线不是单纯的在文字之上,而是给一个Table中的一行加上这种删除线效果。
为永登等地区用户提供了全套网页设计制作服务,及永登网站建设行业解决方案。主营业务为成都网站建设、网站设计、永登网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
这里有两个方法,是在不同时期写的,第一个有些缺陷,第二个在第一个基础上要好很多,目前没有发现什么缺陷吧。
直接上代码吧
页面内容:
序号 | 姓名 | 年龄 | 球队 | 球衣号码 | 位置 | 身高 | 体重 | 简介 | 操作 |
---|---|---|---|---|---|---|---|---|---|
1 | 乔丹 | 芝加哥公牛队 | 23 | 得分后卫 | 198公分 | ||||
2 | 科比 | 洛杉矶湖人队 | 24 | 得分后卫 | 198公分 | ||||
3 | 詹姆斯 | 克里夫兰骑士队 | 23 | 小前锋 | 203公分 | ||||
4 | 杜兰特 | 俄克拉荷马雷霆队 | 35 | 小前锋 | 210公分 | ||||
5 | 保罗 | 洛杉矶快船队 | 3 | 控球后卫 | 188公分 |
页面效果:
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 } });
点击删除按钮效果如下:
大家有没有发现,做了一些小改动,不同点就在于line方法中加的动态浮动div的形态。从界面显示可能不太看出来,大家会觉得都差不多啊,而且细心的朋友会发现,第二次的删除线已经延伸到了表格之外,有些不好看,这块的修改方法大家可以把>
当然,第二次的删除线不只是在这方面上比第一次的有优势,更重要的是因为,第二次的浮动不依赖于其他条件。所谓的其他条件是什么?比如,因为第一个里面用到了相对位移的东西,所以如果当含有删除线的这个table在页面最初加载时是隐藏状态的(有可能的,如果tab标签里不是第一个)。根本就取不到相对位移的值,这样就会出错。
再比如,用js想做一个打印页面的功能时,你需要读取原页面的html元素,把其放在打印窗口中,但是此时的删除线的相对位移就不是针对打印窗口而言了,所以基本也都会出错。
而第二次的删除线就完全不用考虑相对位移的问题了,当其插入每一行表格的第一列之后,绝对定位,脱离原来的文档流,调整一下上内边距,就有一个元素块在这一行上,然后里面包一个“线”就OK了。
这里其实css的东西是关键点,主要也不是专业写这些的,所以费了点劲,通过文章来记录一下。