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/][1]** 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/][1]** [1]: http://jsfiddle.net/XgH43/3/

以上就是Table styling with jquery - Jquery event styling not responding accordingly的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏