jQuery에서 tr태그에 background-color가 먹지 않을때

 jQuery를 사용하는 환경에서, 특정 tr태그를 클릭했을때,

 

클릭한 tr태그에 background-color를 주고, 나머지 tr태그에는 background-color를 흰색으로 주는 기능을 개발 하려고 한다.

 

하지만 아래와 같은 소스에서,, tr태그에서 background-color가 먹지 않는 현상이 발생한다.

	$("tr[data-oid]").css("font-weight", "normal");
	$('tr[data-oid=' + indexOID + ']').css('font-weight', 'bold');

	$("tr[data-oid]").css("background-color", "#ffffff");
	$('tr[data-oid=' + indexOID + ']').css('background-color', '#c3e5f3 !important');

 

 

디자이너분께 여쭤보니 대답은 다음과 같다.

 

td태그에 background-color가 먹혀있으면, 부모인 tr태그에서 아무리 background-color를 줘도 먹지 않는다.

 

해결법

이런식으로,, tr태그에 background-color를 주기전에 td태그에 background-color를 준다.

그리고 내가 주고자 하는 background-color에는 !important를 추가하여 우선선위를 부여한다.

	$("tr[data-oid]").css("font-weight", "normal");
	$('tr[data-oid=' + indexOID + ']').css('font-weight', 'bold');

	$("tr[data-oid]").css("background-color", "#ffffff");
	$("tr[data-oid] td" ).css("background-color", "#ffffff");
	
	$('tr[data-oid=' + indexOID + ']').css('background-color', '#c3e5f3 !important');
	$('tr[data-oid=' + indexOID + '] td').css('background-color', '#c3e5f3 !important');