Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery]Kolorowanie wierszy w tabeli
Forum PHP.pl > Forum > Przedszkole
marcwars
29.11.2011, 22:04:49
Nie działa mi kolorowanie wierszy, próbowałem już różnych sposobów z jquery, ale lipa.
kod strony:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
  5. <script type='text/javascript' src='javascript.js'></script>
  6. <script type="text/javascript" src="jquery-1.7.1.js"></script>
  7.  
  8. 	<script type="text/javascript">
  9.       $(function() {
  10.         $("tr:even").addClass("striped");
  11. 		//$("table tr:nth-child(even)").addClass("striped");
  12.       });
  13.     </script>
  14. 	<link rel="stylesheet" type="text/css" href="style.css" />
  15. </head>
  16. <body>
  17.  
  18. <form name='myForm'>
  19. Nazwa produktu: <input type='text' id='nazwa' /> <br />
  20. Cena produktu: <input type='text' id='cena' /><br />
  21. <input type='button' onclick='ajaxFunction()' value='Dodaj' />
  22. </form>
  23. <div id='ajaxDiv'>Your result will display here</div>
  24.  
  25. </body>
  26. </html>
[HTML] pobierz, plaintext


W divie o id='ajaxDiv' wchodzi ajaksowany plik php- tutaj fragment od wstawiania tabeli:
[PHP] pobierz, plaintext 
  1. .....
  2. $display_string = '<table>';
  3. $display_string .= '<tr>';
  4. $display_string .= '<th>Produkt</th>';
  5. $display_string .= '<th>Cena</th>';
  6. $display_string .= '</tr>';
  7.  
  8. 	// Insert a new row in the table for each person returned
  9. while($row = mysql_fetch_array($result)){
  10. 	$display_string .= '<tr>';
  11. 	$display_string .= '<td>'.$row['nazwa'].'</td>';
  12. 	$display_string .= '<td>'.$row['cena'].'</td>';
  13. 	$display_string .= '</tr>';
  14.  
  15. }
  16. $display_string .= '</table>';
  17. echo $display_string;
  18. ?>
[PHP] pobierz, plaintext


Nadmienię, że wszystko chodzi poprawnie, więc nie rozumiem skąd ten problem. Główka tabeli (th) "łapie kolor", ale co drugi wiersz już tego nie chce:(
Czy ktoś mi pomoże wskazując błąd
qrzysztof
29.11.2011, 22:21:12
Koloru nie łapie ale czy łapie klasę "striped"?

Bo sprawdziłem i u mnie łapie. Możliwe błędy:

1) klasa "striped" jest ale kod css jest zły (może coś innego nadpisuje kolor zdefiniowany w klasie "striped")
2) tr nie łapią klasy "striped" - zła ścieżka do jquery
3) błąd powoduje ajax - funkcja dodająca paski wykonuje się tylko po przeładowaniu strony, a ajax strony nie przeładowuje
r4xz
29.11.2011, 22:25:30
a nie lepiej zrobić to w css?

-edit-
pozwolę sobie jeszcze rozwinąć myśl - http://www.quirksmode.org/css/nthchild.html
a że stare IE tego nie chwyci - kto by się przejmował wink.gif
Prym
29.11.2011, 22:37:28
A po co jquery? zastosuj samego css'a:

linijka do dodania w pliku css:
co druga:
Kod
table tr:nth-of-type(2n) { cos tu z css}

lub parzyste:
Kod
table tr:nth-of-type(even) { cos tu z css}


u mnie działa wszędzie gdzie trzeba smile.gif
marcwars
29.11.2011, 22:38:27
Nie wiem, czy łapie klasę stripped - w źródle strony (korzystam z FF) nie ma tabeli (chociaż się wyświetla w zakładce).
Niepokoi mnie fakt, że nie chce się paskować, a nie używam IE (z wiadomych względów)- nie chodzi w IE też, ale w FF też co gorsza.
qrzysztof
29.11.2011, 22:39:56
Zainstaluj sobie dodatek Firebug do FF (przydatna rzecz). I rzuć jeszcze okiem na mojego posta wyżej. Prawdopodobnie chodzi o błąd z punktu 3).
marcwars
29.11.2011, 22:44:13
css podany przez Pryma chodzi w ff, ale nie w ie.
Tak czy siak dzięki, a czy ktoś wie, co jest nie tak z tym kodem z jquery?

Qrzysztof - a co to jest błąd z punktu 3? Bo niestety nie łapię...
qrzysztof
29.11.2011, 22:45:00
Cytat(qrzysztof @ 29.11.2011, 22:21:12 ) *
Koloru nie łapie ale czy łapie klasę "striped"?

Bo sprawdziłem i u mnie łapie. Możliwe błędy:

1) klasa "striped" jest ale kod css jest zły (może coś innego nadpisuje kolor zdefiniowany w klasie "striped")
2) tr nie łapią klasy "striped" - zła ścieżka do jquery
3) błąd powoduje ajax - funkcja dodająca paski wykonuje się tylko po przeładowaniu strony, a ajax strony nie przeładowuje

marcwars
29.11.2011, 22:51:22
Jeśli ajax, to trudno, padłem ofiarą własnego geniuszu (haha)- dzięki Qkrzysztof za info.
Ścieżka do jquery jest prawidłowa.

A css przesyłam dla ciekawości- wygląda ok:

[HTML] pobierz, plaintext 
  1. body,td {font-size: 14px;}
  2. table {background-color: black; border: 1px black solid; border-collapse: collapse;}
  3. th {border: 1px outset silver; background-color: maroon; color: white;}
  4. tr {background-color: #fff; margin: 1px;}
  5. tr.striped {background-color: #eee;}
  6. td {padding: 1px 8px;}
[HTML] pobierz, plaintext


qrzysztof
29.11.2011, 22:55:42
Jeśli chciałbyś mimo wszystko to zrobić ajaxem to:

[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(function() {
  3.     makeStripes();
  4. });
  5.  
  6. function makeStripes() {
  7. $("tr:even").addClass("striped");
  8. //$("table tr:nth-child(even)").addClass("striped");
  9. }
  10. </script>
[PHP] pobierz, plaintext


I w kodzie javascript gdzie wstawiasz za pomocą ajaxa tę tabelę musisz po jej wstawieniu wykonać funkcję makeStripes() - to doda odpowiednie klasy do parzystych wierszy.

Ja też nie jestem za tym aby stawać na głowie by dogodzić ludziom używającym IE. Ale jeśli mogę to zrobić całkiem niewielkim kosztem, to - aczkolwiek niechętnie - robię smile.gif
marcwars
29.11.2011, 23:04:22
Wstawiam, ale dalej lipa, może źle wstawiam?

[HTML] pobierz, plaintext 
  1. //Browser Support Code
  2. function ajaxFunction(){
  3. 	var ajaxRequest;  // The variable that makes Ajax possible!
  4.  
  5. 	try{
  6. 		// Opera 8.0+, Firefox, Safari
  7. 		ajaxRequest = new XMLHttpRequest();
  8. 	} catch (e){
  9. 		// Internet Explorer Browsers
  10. 		try{
  11. 			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  12. 		} catch (e) {
  13. 			try{
  14. 				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  15. 			} catch (e){
  16. 				// Something went wrong
  17. 				alert("Your browser broke!");
  18. 				return false;
  19. 			}
  20. 		}
  21. 	}
  22. // Create a function that will receive data sent from the server
  23. 	ajaxRequest.onreadystatechange = function(){
  24. 		if(ajaxRequest.readyState == 4)
  25. 		//get the info sent from server
  26. 		{
  27. 		var ajaxDisplay = document.getElementById('ajaxDiv');
  28. 			ajaxDisplay.innerHTML = ajaxRequest.responseText;
  29. 		}
  30. 	}
  31.  
  32. 	var nazwa = document.getElementById('nazwa').value;
  33. 	var cena = document.getElementById('cena').value;
  34. 	var queryString = "?nazwa=" + nazwa + "&cena=" + cena;
  35. 	ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
  36. 	ajaxRequest.send(null); 
  37. 	}
  38.  
  39.  
  40. function makeStripes() {
  41. $("tr:even").addClass("striped");}
  42. $(function() {
  43. makeStripes();
  44. });
[HTML] pobierz, plaintext
qrzysztof
29.11.2011, 23:08:18 
[JAVASCRIPT] pobierz, plaintext 
  1. // Create a function that will receive data sent from the server
  2. ajaxRequest.onreadystatechange = function(){
  3. if(ajaxRequest.readyState == 4)
  4. //get the info sent from server
  5. {
  6. var ajaxDisplay = document.getElementById('ajaxDiv');
  7. ajaxDisplay.innerHTML = ajaxRequest.responseText;
  8. makeStripes();
  9. }
[JAVASCRIPT] pobierz, plaintext
marcwars
29.11.2011, 23:11:06
Dzięki, teraz działa!
Pozdrawiam.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.