jQuery를 사용하여 여러 행 레코드의 행을 스트라이핑하는 방법은 무엇입니까?

현재 테이블의 행을 강조 표시하기 위해 다음 jQuery 스크립트를 사용하고 있습니다.jQuery를 사용하여 여러 행 레코드의 행을 스트라이핑하는 방법은 무엇입니까?

<script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $('table.grid tbody tr:odd').addClass('alt'); 
     }); 
    </script>

각 행은, 정말하지만, 내가 실행 한 새로운 기록이다 이것은 내가 두 개의 데이터 행을 타고 jQuery를 이렇게 수정하고 싶은 기록이 문제에 데이터의 테이블에 대한 좋은 작품 그것은 무언가 같이 렌더링 :

<table> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Record 1 Field 1</td> 
      <td>Record 1 Field 2</td> 
     </tr> 
     <tr> 
      <td colspan="2">Record 1 Field 3</td> 
     </tr> 
     <tr class="alt1"> 
      <td>Record 2 Field 1</td> 
      <td>Record 2 Field 2</td> 
     </tr> 
     <tr class="alt2"> 
      <td colspan="2">Record 2 Field 3</td> 
     </tr> 
     <tr> 
      <td>Record 3 Field 1</td> 
      <td>Record 3 Field 2</td> 
     </tr> 
     <tr> 
      <td colspan="3">Record 1 Field 3</td> 
     </tr> 
     <tr class="alt1"> 
      <td>Record 4 Field 1</td> 
      <td>Record 4 Field 2</td> 
     </tr> 
    <tr class="alt2"> 
     <td colspan="4">Record 2 Field 3</td> 
    </tr> 
</tbody> 
</table>

나는 모든 3 행은 'ALT2'의 클래스를 가지고 'ALT1'모든 4 행의 클래스를 갖고 싶은 곳

가 어떻게 jQuery를에이를 것 ?

출처

2009-03-23 mattruma

위의 답변은 약간 정확합니다. i % 3 == 0 및 i % 4 == 0을 사용하는 대신 동일한 모듈러스 제수를 사용하십시오. 따라서 0에서 시작하여 i % 4 == 2와 i % 4 == 3은 2를 건너 뛰고 2를 건너 뛰고 2를 건너 뛰고 나머지는 3, 4, 6, 8, 9, 12를 사용합니다. 등 그래서, 약간의 수정은

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('table.grid tbody tr').each(function(i) { 
      if(i%4 == 2) { 
       //Each 3rd row in sets of 4 
       $(this).addClass('alt1'); 
      } 
      if(i%4 == 3) { 
       //Each 4th row in sets of 4 
       $(this).addClass('alt2'); 
      } 
     }); 
    }); 
</script>

출처

2009-03-23 16:28:56 Rich

나는 그 질문을 오해 했습니까? 3, 4, 6, 8, 9, 12는 그가 요구하는 것이 아닙니까? – Steerpike

아. 네. Heh, 나는 그것을 완전히 오해했다. 나는 그가 3, 6, 9, 12 등의 그룹과 4, 8, 12, 16 등을 원한다고 생각했다. 실제로 그는 3/4, 6/7 등을 원했다. – Steerpike

-1

다른 행을 사용하는 경우 rowspan (HTML) attribute을 사용하십시오.

출처

2009-03-23 16:11:23

실제로는 하나의 레코드에 매핑되는 2 개의 행이며 행을 스트라이프하고 싶습니다. – mattruma

<script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $('table.grid tbody tr').each(function(i) { 
       if(i%3 == 0) { 
        //We're at a 3rd row 
        $(this).addClass('alt1'); 
       } 
       if(i%4 == 0) { 
        //We're at at 4th row 
        $(this).addClass('alt2'); 
       } 
      }); 
     }); 
    </script>

출처

2009-03-23 16:16:46 Steerpike

아마 별도의 TBODY 태그에 각 레코드 (여러 여부를) 할당 쉬울 것이다. 많은 tbody 태그를 가질 수 있으며 레코드가 여러 행에 있으면 별도의 tbody 태그에있는 각 레코드가 가장 적합합니다.

$('table.grid tbody:odd tr:first').addClass('alt1'); 
$('table.grid tbody:odd tr:last').addClass('alt2');

출처

2009-03-23 16:43:40 Tracker1

$('table.grid tbody tr:nth-child(4n+2)').addClass('alt1'); 
$('table.grid tbody tr:nth-child(4n+3)').addClass('alt2');

작동합니다 (테스트되지 않은).

출처

2009-03-23 17:10:00 Ms2ger

흠 - 그 테이블 구조는 아주 드문 경우입니다. 그런 테이블에 넣을 샘플 데이터 중 일부를 보여줄 수 있습니까?

대부분의 경우 생각해 보면, 로우 스팬 (Nerdling 언급) 또는 본문 내의 TH 요소 (각 레코드에 제목 행 제공) 중 하나를 사용하는 것이 더 정확할 것입니다. .

구조에 세부 수준이 추가되면 스트라이프 3rd/stripe 4th 값을 스크립트에 하드 코딩하지 않고 자바 스크립트를 작성하여 테이블의 실제 구조를 읽을 수 있습니다. 예를 들어, 아무 것도하지 않고 3 행 레코드를 처리하는 스크립트로 끝날 것입니다.

샘플 데이터를 표시 할 수 있다면 스크립트를 사용해 보겠습니다.

출처

2009-03-24 09:59:13 Beejamin

jQuery를 사용하여 여러 행 레코드의 행을 스트라이핑하는 방법은 무엇입니까?

답변

관련 문제