alterner les couleurs de ligne à l'aide de jquery - jquery, row

En utilisant jQuery et pas CSS, est-il possible d'alterner les couleurs des lignes entre les enregistrements? Si tel est le cas, quelqu'un peut-il fournir un script de code court sur la manière de procéder?

Réponses:

Essaye ça:

$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");

Ne voulez-vous pas utiliser CSS pour la prise en charge de plusieurs navigateurs (IE)? Si oui, vous pourrait conservez le style dans le CSS et utilisez simplement jQuery pour définir la classe.

Par exemple:

<style>
/* tr:nth-child(even) */
tr.even { background-color: white; }
/* tr:nth-child(odd) */
tr.odd { background-color: black; }
</style>
<script>
$(function(){
// Apply to each table individually and make sure nothing is doubleclassed
// if you run this multiples of times.
$("table").each(function() {
$("tr:odd",  this).addClass("odd").removeClass("even");
$("tr:even", this).addClass("even").removeClass("odd");
});
});
</script>

jQuery utilise le moteur Sizzle Seletor Engine, ce qui est cool car il utilise la même syntaxe que CSS. Donc, vous utilisez le même sélecteur que CSS mais utilisez ensuite le jQuery .css() fonction pour modifier les elemen "t CSS:

$("#table_id").find("tr:even").css({"background-color":"red"})
.end().find("tr:odd").css({"background-color":"blue"});

Cet exemple de code sélectionne la table que vous souhaitez modifier, puis tous les éléments enfants pairs (tr"s) et change leur couleur de fond, il utilise ensuite .end() pour revenir à la sélection précédente de la table entière et sélectionne les lignes impaires pour modifier leur CSS.

Vous pouvez sélectionner tr Les éléments d'une table et de CSS acceptent une fonction en tant que paramètre, qui renverra une valeur en fonction de certains critères que vous aurez définis. Dans ce cas, vous pouvez tester la régularité de l'index.

$("#table tr").css("background-color", function(index) {
return index%2==0?"blue":"red";
});

JSFiddle: http://jsfiddle.net/n3Zny/

J'ai utilisé le code suivant pour changer la couleur de la ligne alternative. J'ai pris référence à http://www.tutsway.com/set-alternate-row-colors-in-jQuery.php

window.jQuery(document).ready(function(){
window.jQuery("tr:odd" ).css("background-color","#fbcff5" );
window.jQuery("tr:even").css("background-color","#bbbbff");
});

Pour ceux qui souhaitent ignorer les lignes cachées (ou un autre attribut, disons class="struck"):

<style>
tr.struck{background-color:#633;color:white;}
tr.eee{background-color:#EEE;color:#000;}
tr.fff{background-color:#FFF;color:#000;}
</style>
function doZebra(){
var tTrCnt=0;
$("##tblData tbody tr").each(function(){
if($(this).css("display")!="none" && !$(this).hasClass("struck")){
tTrCnt++;
if(tTrCnt % 2) $(this).removeClass().addClass("eee");
else  $(this).removeClass().addClass("fff");
}
});
}