Question

我正在使用表格和一些CSS用于外观和感觉。这些表是一些其他jquery插件，如dataTable

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，而下方是您可以理解清楚的图片

以下的CSS代码

.tr_class {
    background-color: #CCB;
}

.tr_class_head {
    background-color: #CCE;
}

enter image description here

Answer 1

您可以使用zebra小部件或在进行排序后尝试这个：

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

Answer 2

基本上，您正在使用类来应用样式和数据表，并使用可能导致彼此相邻的3个奇数行的类对行进行排序。我最近使用过数据表并且我做了一些样式更改但是我不需要奇数甚至行样式。你可以尝试这个，但我不能保证它的成功：

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

希望它有所帮助。

jquery，css不申请表

2 个答案: