Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jquery]Kolorowanie wierszy w tabeli
marcwars
post 29.11.2011, 22:04:49
Post #1





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 14.02.2011
Skąd: Wawa

Ostrzeżenie: (0%)
-----

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

Ten post edytował marcwars 29.11.2011, 22:07:58
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 12)
qrzysztof
post 29.11.2011, 22:21:12
Post #2





Grupa: Zarejestrowani
Postów: 220
Pomógł: 19
Dołączył: 25.04.2009

Ostrzeżenie: (0%)
-----

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

Ten post edytował qrzysztof 29.11.2011, 22:38:33


--------------------
Znalazłeś sam rozwiązanie swojego problemu? Nie pisz "już wiem, do zamknięcia". Podziel się rozwiązaniem - inni będą mieli łatwiej.
Go to the top of the page
+Quote Post
r4xz
post 29.11.2011, 22:25:30
Post #3





Grupa: Zarejestrowani
Postów: 673
Pomógł: 106
Dołączył: 31.12.2008

Ostrzeżenie: (0%)
-----

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

Ten post edytował r4xz 29.11.2011, 22:27:01


--------------------
GitHub
Go to the top of the page
+Quote Post
Prym
post 29.11.2011, 22:37:28
Post #4





Grupa: Zarejestrowani
Postów: 100
Pomógł: 11
Dołączył: 20.05.2007
Skąd: z fotela :)

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
marcwars
post 29.11.2011, 22:38:27
Post #5





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 14.02.2011
Skąd: Wawa

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
qrzysztof
post 29.11.2011, 22:39:56
Post #6





Grupa: Zarejestrowani
Postów: 220
Pomógł: 19
Dołączył: 25.04.2009

Ostrzeżenie: (0%)
-----

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).


--------------------
Znalazłeś sam rozwiązanie swojego problemu? Nie pisz "już wiem, do zamknięcia". Podziel się rozwiązaniem - inni będą mieli łatwiej.
Go to the top of the page
+Quote Post
marcwars
post 29.11.2011, 22:44:13
Post #7





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 14.02.2011
Skąd: Wawa

Ostrzeżenie: (0%)
-----

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ę...

Ten post edytował marcwars 29.11.2011, 22:43:07
Go to the top of the page
+Quote Post
qrzysztof
post 29.11.2011, 22:45:00
Post #8





Grupa: Zarejestrowani
Postów: 220
Pomógł: 19
Dołączył: 25.04.2009

Ostrzeżenie: (0%)
-----

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



--------------------
Znalazłeś sam rozwiązanie swojego problemu? Nie pisz "już wiem, do zamknięcia". Podziel się rozwiązaniem - inni będą mieli łatwiej.
Go to the top of the page
+Quote Post
marcwars
post 29.11.2011, 22:51:22
Post #9





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 14.02.2011
Skąd: Wawa

Ostrzeżenie: (0%)
-----

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




Ten post edytował marcwars 29.11.2011, 22:52:52
Go to the top of the page
+Quote Post
qrzysztof
post 29.11.2011, 22:55:42
Post #10





Grupa: Zarejestrowani
Postów: 220
Pomógł: 19
Dołączył: 25.04.2009

Ostrzeżenie: (0%)
-----

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

Ten post edytował qrzysztof 29.11.2011, 23:00:34


--------------------
Znalazłeś sam rozwiązanie swojego problemu? Nie pisz "już wiem, do zamknięcia". Podziel się rozwiązaniem - inni będą mieli łatwiej.
Go to the top of the page
+Quote Post
marcwars
post 29.11.2011, 23:04:22
Post #11





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 14.02.2011
Skąd: Wawa

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
qrzysztof
post 29.11.2011, 23:08:18
Post #12





Grupa: Zarejestrowani
Postów: 220
Pomógł: 19
Dołączył: 25.04.2009

Ostrzeżenie: (0%)
----- 

[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


Ten post edytował qrzysztof 29.11.2011, 23:09:58


--------------------
Znalazłeś sam rozwiązanie swojego problemu? Nie pisz "już wiem, do zamknięcia". Podziel się rozwiązaniem - inni będą mieli łatwiej.
Go to the top of the page
+Quote Post
marcwars
post 29.11.2011, 23:11:06
Post #13





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 14.02.2011
Skąd: Wawa

Ostrzeżenie: (0%)
-----

Dzięki, teraz działa!
Pozdrawiam.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 13:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn