방지 jQuery를 배경 색

Question

을 변경 나는 테이블의 짝수 행의 background-color 변경 jQuery를 사용하고 있습니다 :

$("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1"); 

가 지금은 일부의 결과에 따라 내 tr들 중 하나에 다른 색상을 설정할을 PHP 작업.

<tr 
    <?php 
     // Some tasks to see whether background-color should change or not 
     if (yes) echo "style='background-color:#A60000;'" 
    ?> 
> 

그러나 JQuery와 색상을 무시하기 때문에 일을하고 #F1F1F1로 다시 설정하지 않습니다. jQuery가이를 막을 수있는 방법이 있습니까? 아니면 jQuery도 사용해야합니까?

Answer 1

$.css을 사용하여 색상을 추가하지 말고 addClass을 사용하여 행에 클래스를 추가하십시오. PHP에서는 또한 인라인 스타일 대신 클래스를 추가합니다.

그런 다음, 스타일 시트, 그에 따라 행 스타일을 지정할 수 있습니다 :

/* The class that is added by JQuery */ 
.jqueryclass { 
    background-color: #F1F1F1; 
} 

/* The class that is added by PHP, even if jquery added a class too. */ 
.phpclass, .phpclass.jqueryclass { 
    background-color: #A60000; 
} 

훨씬 깨끗하고 maintanable입니다. 자바 스크립트 나 PHP에서 복잡하고 혼란스런 검사를하지 않고도 CSS가 특정 클래스의 조합을 어떻게 스타일링할지 결정할 수 있습니다.

그리고 지금 CSS 파일이 있다면 CSS 클래스를 추가하여 대체 행의 스타일을 지정할 수 있습니다. 그렇게하면 자바 스크립트가 비활성화 된 브라우저에서 작동합니다. 시간이 지나면이 스타일을 지원하지 않는 브라우저가 붕괴되었을 때 JQuery 코드를 완전히 제거 할 수 있습니다.

Answer 2

그냥 스타일 속성 전에/직후

data-nooverride 

같은 것을 추가 할 수 있습니다.

(당신은 각을 사용하여 다음과 같은 코드를 편집해야합니다) :

var tr = $("table tbody tr:nth-child(even)"); 
if (tr.data('nooverride')){ 
    $("table tbody tr:nth-child(even)").css("background-color", "#F1F1F1"); 
} 

을하고 스크립트를 확인

Answer 3

예, 할 수 있습니다. 당신은

$(selector).not('.myclass').css({...}); 

당신이 클래스를 추가하고 있기 때문에 해당 행을 무시하고, (아마 클래스를 추가하여) 어떻게 든

<tr 
    <?php 
     if (yes) echo "class='myclass' style='background-color:#A60000;'" 
    ?> 
> 

을 행를 확인하고 다음의 jQuery 셀렉터를 수정하는 방법을해야합니다 클래스의 일부로 배경색을 지정해야합니다.

Answer 4

tr 태그에 style 속성을 추가하는 대신 PHP 코드에서 class을 추가하십시오.

그런 다음 아래에서와 같이 주어진 클래스가있는 tr 태그를 수정하지 않으려면 jQuery 선택기를 변경하십시오 (jQuery documentation on :not 참조). 이 클래스는,이 경우, special라고 :

$("table tbody tr:nth-child(even):not(.special)").css("background-color", "#F1F1F1"); 

이 working example를 참조하십시오.

Answer 5

CSS에서 일부 스타일을 지정한 후에 "! important"를 추가하면 브라우저에이 스타일의 우선 순위가 가장 높음을 알립니다.

그래서 당신은 그것을 위해 당신의 CSS 파일에서 클래스를 만들 수 있습니다

.myclass{ 
    background-color:#A60000 !important; 
} 

당신은 스타일 속성에이를 추가 할 수 있습니다,하지만 난 그것을 이런 식으로 작동하는지하지만 확실하지 않다