Giovanni Di Toro Giovanni Di Toro - 4 days ago 6
Javascript Question

Table styling with jquery - Jquery event styling not responding accordingly

I have a table with about 15 tr's and 11 td's for each tr. I which a could on hovering the tr to make only the td number 8 (from 0) to be styled through the .css() method.

Problem: with my code it selects the whole column , all the td's with the .media class , not only the one in the hovered tr.

EDIT :

Here is the jsfiddle link: http://jsfiddle.net/XgH43/3/

CHANGED :

Here is what I tried:

note: MEDIA, LIGADO and HIDE are reference to classes I made.
note 2 : I don't have access to the css or the php, I'm working separated from them, later they can implement classes and whatever they feel like it.

//MOUSE OVER:

//MEDIA W/O .LIGADO:

//W/O .HIDE:
$("tr.destacar:not(.hide, .ligado)").mouseover(function (){
$("td.media", $(this)).css(
{
'background' : 'purple',
'box-shadow' : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
'-moz-box-shadow' : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
'-webkit-box-shadow': 'inset 0 10px 20px #FFFFFF,0 1px 5px #929292',
'text-decoration' : 'underline'
}
);
}
);

//WITH HIDE:
$("tr.destacar.hide:not(.ligado)").mouseover(function (){
$("td.media", $(this)).css(
{
'background' : 'green',
'box-shadow' : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
'-moz-box-shadow' : 'inset 0 10px 20px 5px #FFFFFF,0 1px 5px #929292',
'-webkit-box-shadow': 'inset 0 10px 20px #FFFFFF,0 1px 5px #929292',
'text-decoration' : 'underline'
}
);
}
);

//MOUSE OUT:

//MEDIA W/O .LIGADO:

//MEDIA W/O.HIDE:
$(".destacar").not(".hide, .ligado").mouseout(function (){
$("td.media", $(this)).css(
{
'background' : 'red',
'box-shadow' : 'none',
'-moz-box-shadow' : 'none',
'-webkit-box-shadow': 'none',
'text-decoration' : 'none'
}
);
}
);

//MEDIA WITH .HIDE:
$(".destacar.hide").not(".ligado").mouseout(function (){
$("td.media", $(this)).css(
{
'background' : 'yellow',
'box-shadow' : 'none',
'-moz-box-shadow' : 'none',
'-webkit-box-shadow': 'none',
'text-decoration' : 'none'
}
);
}
);

// ON CLICK:
//
//MEDIA WITH LIGADO:

$('.destacar.ligado').not(".hide").click(function () {

//MEDIA W/O HIDE:
$("td.media", $(this)).css(
{
'background' :'red',
'box-shadow' :'none',
'font-weight' :'normal',
'font-size' :'default',
'-moz-box-shadow' :'none',
'box-shadow' :'none',
'-webkit-box-shadow':'none',
'-o-box-shadow' :'none'
}
);
}
);

//MEDIA WITH .HIDE:
$('.destacar.hide.ligado').click(function () {
$("td.media", $(this)).css(
{
'background' :'yellow',
'box-shadow' :'none',
'font-weight' :'normal',
'font-size' :'default',
'-moz-box-shadow' :'none',
'box-shadow' :'none',
'-webkit-box-shadow':'none',
'-o-box-shadow' :'none'
}
);
}
);

//MEDIA W/O .LIGADO

//MEDIA W/O .HIDE:
$('.destacar').not(".hide, .ligado").click(function () {
$(this).addClass(".ligado");
$("td.media", $(this)).css(
{
'background' :'purple',
'box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'font-weight' :'bolder',
'font-size' :'12pt',
'-moz-box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'-webkit-box-shadow':'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'-o-box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775'
}
);
}
);

//MEDIA WITH .HIDE:
$('.destacar.hide').not(".ligado").click(function () {
$(this).addClass(".ligado");
$("td.media", $(this)).css(
{
'background' :'green',
'box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'font-weight' :'bolder',
'font-size' :'12pt',
'-moz-box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'-webkit-box-shadow':'0 1px 5px #FFFFFF,inset 0 10px 20px #305775',
'-o-box-shadow' :'0 1px 5px #FFFFFF,inset 0 10px 20px #305775'
}
);
}
);


It's not the full code , but It's the part that matters. I've changed it and now it almost works, but still not fully working.
PS.: It's the tr that must not have the .hide and .ligado classes and not the td.

Jsfiddle full version code : http://jsfiddle.net/XgH43/3/

Answer

I've acctually used the tow previous answers - if you know how could I reward both the authors please tell me - and came up with the solution , but unfortunetly I had to edit the css file , which fails my goal to not do so, I could mess arround and find another solution , but really , to edit the css makes it much cleaner. Here it is the jsfiddle link of it (by the way , the colors are just for testing , I wouldn't make it so ugly). Thanks again , Niclas and Sheikh.

Comments