IE에서 n 번째 자식 선택기 대체

Question

여러 테이블을 사용하고 테이블 행을 번갈아 가며 음영 처리하고 싶습니다. 그렇게하는 일반적인 방법이 파이어 폭스, 크롬, 사파리에서 작동

.t tbody > tr:nth-child(odd) > td:nth-child(1) { 
     background-color:#f0f0f0; 
    } 

이지만, IE는 nth-child() 의사 클래스를 지원하지 않습니다. 클래스를 사용하여 수동으로 각 행에 태그를 지정하지 않은 경우이를 수행 할 수있는 대체 브라우저 방식이 있습니까? 필자는 임베디드 시스템의 공간을 소비하기 때문에이 문제를 피하고자합니다.

참고 :이 페이지는 WiFi 액세스 포인트로 작동하는 내장 시스템에서 제공됩니다. 이는 클라이언트가 인터넷이 아닌 임베디드 시스템에 연결된다는 것을 의미합니다. JS 라이브러리 없음

편집 : IE 9 nth-child()을 지원합니다,하지만 난 IE 7, 8 지원할 수 있어야합니다뿐만 아니라

Answer 1

페이지 끝 부분에이 스크립트를 배치하십시오. 첫 번째 tbody가 발견 된 것으로 가정하지만,이 값을 오프셋 (또는 여러 tbodys를 처리하기 위해)으로 수정하거나 특정 ID로 대상을 지정하여 작업을 더 쉽게 만들 수 있습니다.

<script> 
(function(){ 
    var 
    tby = document.getElementsByTagName('tbody')[0], 
    trs = tby.getElementsByTagName('tr'), 
    i, l = trs.length 
    ; 
    for (i=0; i<l; i++) { 
    if ((i + 1) & 1) { 
     trs[i] 
     .getElementsByTagName('td')[0] 
      .style 
      .backgroundColor = '#f0f0f0' 
     ; 
    } 
    } 
})(); 
</script> 

위의 내용은 바이트가 걱정되는 경우 축소 될 수 있습니다.

Answer 2

없음; 없습니다 불행히도 :nth-child(odd)을 대체 할 클래스를 사용하여 각 행에 수동으로 태그를 지정해야합니다. :nth-child(1)을 :first-child으로 대체 할 수 있습니다. 그러나 IE7 또는 IE8과 매우 오래된 버전은 지원하지 않는다고 가정합니다. 여기

Answer 3

는 CSS는 당신이 필요로한다 : 나는 확실히 사람을 향상시킬 수있어

function go() { 
    tables = document.getElementsByTag('table'); 
    var i, len = tables.length; 
    for(i = 0; i < len; i++) { 
    var tbody = tables[i].children[0] // assumes <tbody> is first child 
    var k, num_trs = tbody.rows.length; 
    for(k = 0; k < num_trs; k+=2) { // k += 2 for alternate shading 
     var tr = tbody.rows[k]; 
     tr.classList.add('shaded'); 
    } 
    } 
} 

: 여기

.shaded { 
    background-color: #F0F0F0; 
} 

테이블 구조에 대한 몇 가지 가정에 대해,이 작업을 수행하는 JS 기능입니다 지능적으로 tbody를 선택하거나 쉐이딩 패턴을 결정하는 매개 변수를 취합니다.