alternatywne kolory wierszy za pomocą jquery - jquery, row

Korzystając z jQuery, a nie z CSS, można zmieniać kolory wierszy między rekordami? Jeśli tak, to czy ktoś może podać krótki skrypt kodu, jak to zrobić?

Odpowiedzi:

Spróbuj tego:

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

Czy po prostu nie chcesz używać CSS do obsługi różnych przeglądarek (np. IE)? Jeśli tak, ty mógłby zachowaj stylizację w CSS i po prostu użyj jQuery, aby ustawić klasę.

Na przykład:

<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 używa mechanizmu Sizzle Seletor, który jest fajny, ponieważ używa tej samej składni co CSS. Używasz tego samego selektora co CSS, ale używasz jQuery .css() funkcja do zmiany elemenów "t CSS:

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

Ten przykład kodu wybiera tabelę, którą chcesz zmienić, a następnie wybiera wszystkie równe elementy podrzędne (tr"s") i zmienia ich kolor tła, a następnie używa .end() aby powrócić do poprzedniego zaznaczenia całej tabeli i wybiera nieparzyste wiersze, aby zmienić ich CSS.

Możesz wybrać tr elementy z tabeli i css akceptuje funkcję jako parametr, który zwróci wartość na podstawie określonych kryteriów. W takim przypadku możesz przetestować indeks w celu wyrównania.

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

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

Użyłem następującego kodu, aby zmienić kolor alternatywnego wiersza. Odebrałem wzmiankę 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");
});

Dla każdego, kto chce pominąć ukryte wiersze (lub inny atrybut, powiedzmy 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");
}
});
}