Jquery edycja 2 tabel (tylko parzyste)

Witam.

Na stronie mam dwie tabele I chciałbym aby parzyste kolumny zmieniły kolor. Jednak jeżeli mam to zrobione tak jak do tej pory to w pierwszej tabeli zmienia mi się prawy wiersz a w drugiej lewy. Co zrobić aby każdą tabelę skrypt widział jako osobną. a nie tak jak jest teraz?

<script>$("table.tabela_produktu td:odd").css("background-color", "#91c8ff").css( "width", "200px").css( "text-align", "center");</script>
<script>$("table.tabela_produktu td:even").css("background-color", "#dbdbdb");</script>

Masz 2 tabele z klasą tabela_produktu? jeśli tak to musisz odwoływać się do każdej z osobna a nie "ładować" do 1 wora wszystkie wiersze.

			$("table.tabela_produktu").each(function(index){ 
				$("td:odd",this).css("background-color", "#91c8ff").css( "width", "200px").css( "text-align", "center"); 
				$("td:even",this).css("background-color", "#dbdbdb");
			})

Nie, nie trzeba stosować .each(). Załatwia sprawę, ale lepiej -- wygodniej, zwięźlej i szybciej -- jest zrobić coś innego.

Selektory :even i :odd to rozszerzenia jQuery. CSS nie ma takich selektorów. Przez to selektory te chodzą w nowoczesnych przeglądarkach wolniej niż zwykłe, CSS-owe, które można przekazać do natywnej metody przeglądarek querySelectorAll().

Dodatkowo, selektory :even i :odd, podobnie jak wiele innych rozszerzeń selektorów z jQuery, działają na całej aktualnej kolekcji jQuery. Tj. najpierw budują JEDNĄ listę (kolekcję) elementów td we wszystkich tabelach produktu na stronie, a potem wybierają te TD-ki, które są nieparzyste lub parzyste. Wszystko to masz opisane w dokumentacji jQuery: http://api.jquery.com/even-selector/ (jeśli używasz jQuery, musisz się nauczyć korzystać z tej dokumentacji -- to absolutny mus)

My chcemy osiągnąć inny efekt. Chcemy wybrać kolumny w tabelach. Czyli te elementy TD, które są parzystymi lub nieparzystymi potomkami elementów TR, czyli wierszy tabeli (ten szczegół o TR-ach nie jest ważny, bo TD zawsze siedzi w TR). Od czegoś takiego mamy selektor :nth-child. Jest zdefiniowany w CSS3 ( http://www.w3.org/TR/css3-selectors/#nth-child-pseudo ), a więc jest standardowy i szybki w nowoczesnych przeglądarkach. Dokumentacja jQuery też o nim wspomina: http://api.jquery.com/nth-child-selector/ .

W tym przypadku, nieparzyste komórki w danym wierszu wybrałbyś za pomocą selektora table.tabela_produktu td:nth-child(odd), a parzyste za pomocą table.tabela_produktu td:nth-child(even). Wprowadzając te selektory do Twojego oryginalnego kodu sprawisz, że będzie on działał zgodnie z Twoimi oczekiwaniami.

Tak swoją drogą, na Twoim miejscu w ogóle nie używałbym jQuery do osiągnięcia takiego efektu. Style lepiej nadawać w... arkuszu stylów, czyli w pliku CSS. Jeśli chciałbym wspierać przeglądarki, które nie obsługują pseudoklasy :nth-child, to w jQuery dodałbym co najwyżej zwykłą klasę even i odd. Rozdzielajmy warstwy. Niech JavaScript będzie od zachowania, a prezentację trzymajmy w CSS.

Super :) o to właśnie chodziło.

A może mi ktoś napisać też dlaczego jak zrobię na diva jakąś animację po najechaniu myszką za pomocą jquery i do diva dodam obrazek img i najadę myszką na ten obrazek to div lata na górę i na dół :). Jak temu zaradzić?

http://ntmmed.webd.pl/implanty/

chodzi o to zielone na górze :)

Polecam używać na co dzień zdarzeń mouseenter/mouseleave zamiast mouseover/mouseout. Te pierwsze prawie zawsze sprawdzają się lepiej, bo działają na całym obszarze danego elementu. Nawet gdy kursor wjeżdża na elementy potomne, to liczy się, że wciąż jest na elemencie nadrzędnym. W przypadku drugiego zestawu, podczas przechodzenia kursora nad elementami potomnymi, może dojść do niechcianego odpalania zdarzenia mouseout, a potem mouseover.

Dzięki wielkie za odpowiedź :).

I jeszcze jedno pytanie mam. A mianowicie pod IE te obrazki na dole które przesówają się w lewo zostawiają za sobą pionowe kreski na stronie. Jak się tego pozbyć?
http://ntmmed.webd.pl/implanty/

<script type="text/javascript">
		$(window).load(function () {
			    setInterval(rotator, 5000);
        });
        
        function rotator() {
        	
        	if($("ul.slideshow").children("li:visible:last").next().length)
        	{
        		$("ul.slideshow").children("li:visible:last").next().show('slide', {direction: 'left'}, 3000);
        		$("ul.slideshow").children("li:visible:last").hide('slide', {direction: 'right'}, 3000);

        	}
        	else
        	{
				$("ul.slideshow").children("li:first").show('slide', {direction: 'left'}, 3000);
        		$("ul.slideshow").children("li:visible:last").hide('slide', {direction: 'right'}, 3000);
        	}
       };	
	</script>

I jeszcze czy mógłby ktoś zerknąć dlaczego po tym jak strona się rozwinie w Firefox tekst na stronie przesuwa się w prawo?

</head>
<body>
	<script type="text/javascript" charset="utf-8">
	  $(document).ready(function(){
	    $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
	  });
	   $("div#tekst_strony").ready(function(){
	    $("div#tekst_strony").show("fold", {}, 1000);
	  });
	</script>