Premesso che utilizzo jquery e il suo plugin DataTables(per far apparire una finestra di ricerca nella tabella e per poter ordinare le righe cliccando sull'intestazione della tabella).
Vorrei realizzare una tabella che abbia un header con un certa classe, che le righe siano di colore alternato e che passando col mouse sulle righe esse cambiano di colore(hover).
Avevo pensato a:
Sezione stili:
<style type="text/css">
.tthead
{ font-family: verdana;background-color: #c2f4e1; font-size: 18px; }
.RigaPari
{background-color: #eee;}
.RigaDispari
{background-color: #ddd;}
</style>
Sezione JS
<script>
$(document).ready(function()
{
$('#Tabella trdd').addClass('RigaPari');
$('#Tabella tr:even').addClass('RigaDispari');
$('#Tabella').dataTable({
"bSort": true,
"bPaginate": false,
"bLengthChange": false,
"bAutoWidth": false,
"bFilter": true,
"bInfo": false});
});
</script>
Tabella nel body
<table class="Tabella" id="Tabella">
<thead class="tthead">
<tr>
<td>Uno</td>
<td>Due</td>
<td>Tre</td>
<td>Quattro</td>
<td>Cinque</td>
</tr>
</thead>
<tbody>
<tr>
<td>R1</td>
<td>R1</td>
<td>R1</td>
<td>R1</td>
<td>R1</td>
</tr>
<tr>
<td>R1</td>
<td>R13</td>
<td>R1</td>
<td>R31</td>
<td>R1</td>
</tr>
</tbody
</table>
Ma attualmente i problemi che mi si verificano sono 2:
1)Jquery nell'aggiungere la classe(per cambiare i colori delle righe e impostarli in modo alternato, mi sovrascrive anche lo stile dell'header)
2)Quando ordino le righe con datatable, cambiano anche le colorazioni delle righe e non sono piu alternate(bensi disposte in base all'oridnamento effettuato da Datatable)....come potrei risolvere? Grazie mille per l'aiuto!

dd').addClass('RigaPari');
Rispondi quotando