jquery, css does not apply to tables

advertisements

I am using tables and some css for user look and feel. And these tables are made some other jquery plugin like dataTable

http://www.datatables.net/

And my php code is below

<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>

And below is the jquery css code

<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>

And function code below

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>";
    }
}

And when i clicked for any th element for sorting then css is not applied to that tr or td and below is the image where you can understand it clear.

And CSS code below

.tr_class {
    background-color: #CCB;
}

.tr_class_head {
    background-color: #CCE;
}


Basically you are using classes to apply styles and datatables sorts your rows with their classes that could cause 3 odd rows next to each other. I recently used datatables and I made some style changes but mine did not require odd and even row styling. You can try this but I cannot guarantee its success:

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

Hope it helps.