값에 따라 테이블의 배경 셀 변경

Question

내 사이트는 데이터 테이블에 대한 정보 (값)가 포함 된 XML 파일을 읽습니다. CSS를 사용하여 테이블의 스타일을 지정하면 모든 것이 잘 동작합니다.

더 나은 사용자 경험을 얻으려면 값에 따라 각 셀의 배경색을 동적으로 변경할 수 있는지 궁금합니다. 예를 들어

:

수있는 각 셀 미만 "5"빨간색 배경색을 가지고;

각 셀> = "5"는 녹색 배경색을 갖습니다.

내 첫 번째 해결책은 자바 스크립트를 사용하는 것입니다.하지만 CSS 스타일만으로이를 해결할 수있는 방법이 있는지 알고 싶습니다. css.I'll jQuery를

$('#mytable tr td').each(function(){ 
    if($(this).text() > 5)$(this).css('background-color','red'); 
}); 

Answer 1

단지 CSS로는 불가능합니다 (CSS를 사용하여 클래스를 부분적으로 구현할 수 있도록 JavaScript를 사용하여 클래스를 할당 할 수도 있지만). 오히려 라이브러리보다 일반 자바 스크립트를 사용하려면

var table = document.getElementById('tableID'); 
var tbody = table.getElementsByTagName('tbody')[0]; 
var cells = tbody.getElementsByTagName('td'); 

for (var i=0, len=cells.length; i<len; i++){ 
    if (parseInt(cells[i].innerHTML,10) > 5){ 
     cells[i].style.backgroundColor = 'red'; 
    } 
    else if (parseInt(cells[i].innerHTML,10) < -5){ 
     cells[i].style.backgroundColor = 'green'; 
    } 
} 

JS Fiddle demo합니다.

var table = document.getElementById('tableID'); 
var tbody = table.getElementsByTagName('tbody')[0]; 
var cells = tbody.getElementsByTagName('td'); 

for (var i=0, len=cells.length; i<len; i++){ 
    if (parseInt(cells[i].innerHTML,10) > 5){ 
     cells[i].className = 'red'; 
    } 
    else if (parseInt(cells[i].innerHTML,10) < -5){ 
     cells[i].className = 'green'; 
    } 
} 

JS Fiddle demo :

하거나, CSS 클래스를 사용합니다.

참고 :

• className.
• getElementById().
• getElementsByTagName().
• innerHTML.
• parseInt().
• style.

Answer 2

이 사용하는 CSS 표현을하는 것이 가능하다을 명심하지,하지만이 아닌 표준이며 IIRC는 Internet Explorer에서만 작동합니다. 그래서 나는 그것을 반대 할 것입니다.

이 서버 측을 사용하거나 JavaScript를 사용하는 것이 최선의 방법입니다.

Answer 3

로 바로 이동에 대해

Answer 4

루프 없이 당신이 이런 식으로

var에 발 = "FF"를 할 수있다;

$ ("# grid td : contains ('"+ val + "')") css ('background-color', 'red');