2012-12-07 3 views
0

asp.net Mvc3 면도기 목록을 사용하여 데이터 테이블을 채우려고하고 있으며 행 색상이 번갈아 CSS를 추가하려고합니다. 이 부분에서 어떤 사람이 나를 도울 수 있습니까? 루프에서 d0 클래스와 d1 클래스를 적용하는 데 도움이됩니다.asp.net mvc 면도기 루프의 행에 대체 색상

<style> 
    tr.d0 td { 
     background-color: #CC9999; 
     color: black; 
    } 

    tr.d1 td { 
     background-color: #9999CC; 
     color: black; 
    } 
</style> 

<table width="100%"> 
     <tr> 
      <th>Name</th> 
      <th>Address</th> 
      <th>Phone</th> 
      <th>Details</th> 
     </tr> 

     @foreach (var item in Model.Info) 
     {  
      <tr> 

       <td><span>@item.Name</span></td> 
       <td><span>@item.Address</span></td> 
       <td><span>@item.Phone</span></td> 
       <td><span>@item.Details</span></td> 

      </tr> 
     } 
    </table> 

답변

3

는 루프 정상적인 사용 -

(안된)

@for (int i = 0; i < Model.Info.Count; i++) { 
    <tr class= @(i%2 ==0 ? "d0" : "d1")> 
     <td><span>@Model.Info[i].Name</span></td> 
     ..... 
    </tr> 
} 

을이 스타일링 문제는 어떻게 홀수에서 짝수 행을 jQuery를 사용하는 방법에 대한 콘텐츠를 렌더링보다는이기 때문에?

$(document).ready(function() { 
    $("table tr:odd").addClass("className"); //make use of more specific css selector 
    //likewise for even rows 
} 
0
$(document).ready(function() { 
    $('table tr:not(.Header):even').addClass('d0'); 

    $('table tr:not(.Header):odd').addClass("d1"); 
}); 

DEMO

2

를 들어이

CSS를 시도

.generalAltRow { 
    background-color:#EFF8FF; 
} 

.generalRow { 
    background-color:white; 
} 


    @{ 
     int i=0; 
    } 
    @foreach (var item in Model.Info) 
    {  
     i = i+1; 
     string rowColor; 
     if (i % 2 == 0) 
     { 
      rowColor = "generalAltRow"; 
     } 
     else { 
      rowColor = "generalRow"; 
     } 

     <tr class="@rowColor"> 
      <td><span>@item.Name</span></td> 
      <td><span>@item.Address</span></td> 
      <td><span>@item.Phone</span></td> 
      <td><span>@item.Details</span></td> 

     </tr> 
    } 
관련 문제