jquery – 如何在表格单元格内创建对角线?

前端之家收集整理的这篇文章主要介绍了jquery – 如何在表格单元格内创建对角线?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何创建从任何给定单元格的左下角到右上角的对角线?

得到这个

@H_301_4@<table> <tr> <td class="crossOut">A1</td> <td>B1</td> </tr> <tr> <td>A2 Wide</td> <td class="crossOut">B2<br/>Very<br/>Tall</td> </tr> </table>

显示这个

解决方法

我不知道是否是最好的方式,但我不能用CSS来做.我的答案是在jQuery中:

http://jsfiddle.net/zw3Ve/13/

@H_301_4@$(function(){ $('.crossOut').each(function(i){ var jTemp = $(this),nWidth = jTemp.innerWidth(),nHeight = jTemp.innerHeight(),sDomTemp = '<div style="position:absolute; border-color: transparent black white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+nHeight+'px; z-index:-2"></div>'; sDomTemp += '<div style="position:absolute; border-color: transparent white white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+(nHeight-1)+'px; z-index:-1"></div>'; jTemp.append(sDomTemp); }); });

要么

http://jsfiddle.net/zw3Ve/16/(含CSS类清洁剂)

CSS部分:

@H_301_4@.crossOut .child{ position:absolute; width:0; height:0; border-style:solid; } .crossOut .black-triangle{ z-index:-2; border-color: transparent black white white; } .crossOut .white-triangle{ border-color: transparent white white white; z-index:-1; }

jQuery代码

@H_301_4@$(function(){ $('.crossOut').each(function(i){ var jTemp = $(this),sDomTemp = '<div class="child black-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+nHeight+'px; "></div>'; sDomTemp += '<div class="child white-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+(nHeight-1)+'px;"></div>'; jTemp.append(sDomTemp); }); });

好的是,它可以与表单元格的任何宽度和高度一起使用.

编辑:

我对使用CSS边框制作的三角形的渲染质量不高兴,所以我使用了css旋转.我认为这是一个更好的工作(线条渲染更好):

http://jsfiddle.net/zw3Ve/21/

(使用-sand-transform是为IE6,所以使用是可选的.)

EDIT2:
最后一个版本不支持IE7-IE8(似乎-sand-transform仅适用于CSS样式,而不是JavaScript编写的样式).我制作了与旧版浏览器兼容的版本:

http://jsfiddle.net/zw3Ve/23/

猜你在找的jQuery相关文章