jquery를 사용하여 마우스 오버시 테이블 행에 배경색과 테두리 추가

Question

마우스가 행 위에 놓일 때 다른 배경색의 표 행에 테두리를 추가하는 방법을 알고있는 사람이 있습니까?

나는이와 함께 행의 배경색을 변경 할 수있었습니다 :

$(document).ready(function() { 
    $(function() { 
     $('.actionRow').hover(function() { 
      $(this).css('background-color', '#FFFF99'); 
     }, 
     function() { 
      $(this).css('background-color', '#FFFFFF'); 
     }); 
    }); 
}); 

하지만 테두리 색상을 추가 할 수 없습니다입니다. 테두리를 테이블 행 태그에 직접 적용 할 수는 없다는 것을 알았지 만 누군가가 선택한 행 내에서 표 셀을 찾고 테두리를 만드는 데 일부 스타일을 적용 할 수있는 jQuery 부두 마법을 알고 싶습니다.

감사합니다!

Answer 1

$(function() { 
     $('tr').hover(function() { 
      $(this).css('background-color', '#FFFF99'); 
      $(this).contents('td').css({'border': '1px solid red', 'border-left': 'none', 'border-right': 'none'}); 
      $(this).contents('td:first').css('border-left', '1px solid red'); 
      $(this).contents('td:last').css('border-right', '1px solid red'); 
     }, 
     function() { 
      $(this).css('background-color', '#FFFFFF'); 
      $(this).contents('td').css('border', 'none'); 
     }); 
    }); 

Answer 2

는 어쩌면 그것은 좋은 출발점 :

http://www.devcurry.com/2009/02/change-table-border-color-on-hover_27.html

Answer 3

가장 좋은 방법은 행에 addClass 및 removeClass하는 것입니다. 그런 다음 스타일 시트 :

.actionRow-hovered td { border-color: whatever; } 

그래서 당신은 실제로 대신 TD 국경 색상의 각 조작됩니다. 통증이 있지만 충분히 걸릴 때 작동합니다.

Answer 4

$('table.tblMenuTabls tr').hover(function(){ 
     $(this).toggleClass('tblOverRow'); 
     },function(){ 
      $(this).toggleClass('tblOverRow')} 
    ).css({cursor: 'hand'}); 

tblMenuTabls 테이블 클래스 이름입니다

및 tblOverRow은 호버 정의와 CSS 클래스입니다.