jquery，css不申請表

我使用表和一些css用戶的外觀和感覺。而且這些表都做了一些其他jQuery插件一樣的dataTablejquery，css不申請表

http://www.datatables.net/

而且我的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以下是圖像，你可以把它理解清楚。

及以下

.tr_class { 
    background-color: #CCB; 
} 

.tr_class_head { 
    background-color: #CCE; 
}

enter image description here

來源

2012-03-19 Rafee

基本上你是使用類應用樣式和datatables排序您的行與他們的類可能會導致3奇數行彼此相鄰。我最近使用了數據表，我做了一些樣式更改，但我不需要奇數和偶數行樣式。你可以試試，但我不能保證它的成功：

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

希望它有幫助。

來源

2012-03-19 09:09:53 Nightwolf

我已經測試這個，它的作品完美。 – Nightwolf 2012-03-19 09:16:21

優秀的男人！它的工作。謝謝..你能告訴我，這個代碼是如何工作的。 – Rafee 2012-03-19 09:19:55

您可以使用斑馬小部件或嘗試這一個你整理後的CSS代碼：

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

來源

2012-03-19 07:51:38 safarov

不工作。我已經使用斑馬小部件，但這個數據表具有一些更多的功能，我想實現與.. – Rafee 2012-03-19 07:54:50

jquery，css不申請表

回答

相關問題