jquery, CSS가 테이블에 적용되지 않습니다.

Question

저는 사용자의 룩앤필을 위해 테이블과 CSS를 사용하고 있습니다. 그리고 이러한 테이블은 데이터 테이블

http://www.datatables.net/

같은 다른 jQuery 플러그인을 만들어 그리고 내 PHP 코드는

<table width="100%" id="top_visit_table"> 
    <thead> 
     <tr align="left"> 
      <th>Product Id</th><th>Product Name</th><th>Product Price</th><th>Number of Views</th> 
     </tr> 
    </thead> 
    <tbody> 
     <?php get_views_of_products($user_id);?> 
    </tbody>    
</table> 

아래 아래 JQuery와 CSS 코드

<script type="text/javascript"> 
$(document).ready(function(){ 

$('#top_visit_table').dataTable(); 

    $("#top_visit_table tbody tr:even").addClass('tr_class'); // this gives color to table 
    $("#top_visit_table thead tr").addClass('tr_class_head'); // this gives color to table 

}); 

</script> 

그리고 기능을이다 코드는

function get_views_of_products($user_id) { 

    $fquery12 = mysql_query("select p.products_id, pd.products_name, p.products_price, pd.products_viewed 
          from products p 
          INNER JOIN products_description pd ON pd.products_id = p.products_id 
          ORDER BY pd.products_viewed DESC 
          "); 

    while($fr12 = mysql_fetch_row($fquery12)) { 
     $price = substr($fr12[2], 0, -2); 
     echo "<tr>"; 
      echo "<td>$fr12[0]</td>"; 
      echo "<td>$fr12[1]</td>"; 
      echo "<td>$price</td>"; 
      echo "<td>$fr12[3]</td>"; 
     echo "</tr>"; 
    } 
} 

그리고 어떤 th 요소를 클릭하여 정렬하면 css이 적용되지 않습니다. tr 또는 td 이하는 명확하게 이해할 수있는 이미지입니다.

그리고 CSS 코드

.tr_class { 
    background-color: #CCB; 
} 

.tr_class_head { 
    background-color: #CCE; 
} 

Answer 1

당신이 스타일을 적용하기 위해 클래스를 사용하고 datatables는 3 개의 홀수 행을 서로 겹칠 수있는 클래스로 행을 정렬합니다. 나는 최근에 datatables를 사용했고 약간의 스타일을 변경했지만, 광산에서는 홀수 및 짝수 행 스타일링이 필요하지 않았습니다. 시도해 볼 수는 있지만 성공을 보장 할 수는 없습니다.

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF} 

희망이 있습니다.

Answer 2

당신은 얼룩말 위젯을 사용하거나 정렬 할 후에이 하나의 시도 할 수 있습니다

아래 : 기본적으로

$("#top_visit_table tbody tr").find("tr").removeClass("even").filter(":even").addClass("even");