Search code examples
jqueryasp.netc#-4.0datatablecell

Jquery Coordinate of the diagonal line in table cell

Currently i's look at this question (How to create a diagonal line within a table cell?) and get a very good answer (http://jsfiddle.net/zw3Ve/23/) from Galled(https://stackoverflow.com/users/529689/galled).

But i got a problem is about:

how to modify the coordinate of the line. because the line i want display is from top-right to bottom-left. Hope someone can teach me.

Thanks a lot.

Solution

  • The last jsfiddle given in the other answer uses css transform to rotate the lines. You specify the angle you'd like to rotate to. In the example, the angle value is negative:

    sDomTemp += '-webkit-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += '-moz-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += '-ms-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += '-o-transform: rotate(-'+nAnglSex+'deg);';
sDomTemp += 'transform: rotate(-'+nAnglSex+'deg);';

    Make the angle positive and it will rotate the other way (chnage rotate(-'+ by rotate('+):

    sDomTemp += 'transform: rotate('+nAnglSex+'deg);';
// repeat for the other browser-specific properties

    For the IE-specific css property filter: progid:DXImageTransform.Microsoft.Matrix() it uses trigonometry and i don't have IE to test so it's out of my scope, sorry. Anyway, here the documentation.