alternative Zeilenfarben mit jquery - jquery, row

Kann man mit jQuery und nicht mit CSS die Zeilenfarben zwischen Datensätzen wechseln? Wenn ja, kann jemand ein kurzes Code-Skript zur Verfügung stellen, wie dies zu erreichen ist?

Antworten:

Versuche dies:

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

Möchten Sie CSS nicht nur für die browserübergreifende (IE) Unterstützung verwenden? Wenn ja, du könnte Behalten Sie das Styling im CSS bei und setzen Sie die Klasse einfach mit jQuery.

Beispielsweise:

<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 verwendet die Sizzle Seletor Engine, was cool ist, da dieselbe Syntax wie bei CSS verwendet wird. Sie verwenden also denselben Selector wie CSS, verwenden dann aber die jQuery .css() Funktion zum Ändern der elemen "t CSS:

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

In diesem Codebeispiel wird die Tabelle ausgewählt, die Sie ändern möchten, und dann alle gerade untergeordneten Elemente (tr"s) und ändert ihre Hintergrundfarbe, verwendet sie dann .end() um zur vorherigen Auswahl der gesamten Tabelle zurückzukehren und wählt die ungeraden Zeilen aus, um deren CSS zu ändern.

Sie können auswählen tr Elemente aus einer Tabelle und Css akzeptieren eine Funktion als Parameter, die einen Wert basierend auf bestimmten Kriterien zurückgibt. In diesem Fall können Sie den Index auf Ebenheit prüfen.

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

JSFidel: http://jsfiddle.net/n3Zny/

Ich habe folgenden Code verwendet, um die Farbe der alternativen Zeile zu ändern. Ich habe Bezug genommen von 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");
});

Für alle, die ausgeblendete Zeilen (oder ein anderes Attribut) überspringen möchten 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");
}
});
}