• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tabela z jQuery

0 głosów
42 wizyt
pytanie zadane 13 września w JavaScript, jQuery, AJAX przez Caesar Początkujący (310 p.)

Mam problem z wyświetlaniem tabeli. Wyświetlają się same dane z API bez szkieletu tabeli.
Może ktoś mi doradzić co jest nie tak w kodzie? Jestem początkujący w jQuery.

 

<head>
	<title>Test</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
	
	<div class="container" id="tekst">          
		<table class="table table-hover">
			<thead>
				<tr>
					<th>#</th>
					<th>Nazwa</th>
					<th>Symbol</th>
					<th>Wartość (USD)</th>
					<th>Wartość (BTC)</th>
					<th>Zmiana %</th>
				</tr>
			</thead>
			<tbody>
				<script>
				
				$.get("https://api.coinmarketcap.com/v1/ticker/", function(data) {
						
					for(x=0; x<30; x++)
					{
						document.write("<tr><td>"+data[x].rank+"</td>");
						document.write("<td>"+data[x].name+"</td>");
						document.write("<td>"+data[x].symbol+"</td>");
						document.write("<td>"+data[x].price_usd+"</td>");
						document.write("<td>"+data[x].price_btc+"</td>");
						document.write("<td>"+data[x].percent_change_24h+"%</td></tr>");
					}
					
				});
				
				</script>
			</tbody>
		</table>
	</div>

</body>

 

1 odpowiedź

+1 głos
odpowiedź 13 września przez sc4rface Gaduła (4,100 p.)
wybrane 13 września przez Caesar
 
Najlepsza

Zrobiłbym to nieco inaczej - nadał tabeli id'ka, pobrał go jquery i co iterację pętli dodawał appenda <td></td> z podstawioną wartością z API.

Funkcja .append()

@EDIT

I przede wszystkim nie korzystaj z document.write, bo on podmienia Ci całą zawartość strony - to może być przyczyną. Tak, czy inaczej - użyj chociażby jQuery'owego .html()

@EDIT2 - dokładniej o tym mówię (nie zapomnij o nadaniu id="tabelka" dla tabeli, bądź jakiego tam sobie chcesz.

$.get("https://api.coinmarketcap.com/v1/ticker/", function(data) {     

	for(x=0; x<30; x++) {
	
		$("#tabelka").append("<tr><td>"+data[x].rank+"</td><td>"+data[x].name+"</td><td>"+data[x].symbol+"</td><td>"+data[x].price_usd+"</td><td>"+data[x].price_btc+"</td><td>"+data[x].percent_change_24h+"</td></tr>");
	
	} 
	
});

 

komentarz 13 września przez Caesar Początkujący (310 p.)

Jesteś bogiem jQuery! laugh

komentarz 13 września przez Tomek Sochacki Stary wyjadacz (14,660 p.)

Zrobiłbym to nieco inaczej - nadał tabeli id'ka, pobrał go jquery i co iterację pętli dodawał appenda <td></td> z podstawioną wartością z API. 

A nie lepiej użyć createDocumentFragment żeby nie odświeżać co chwilę strony, tylko jeden raz po stworzeniu całej tabelki? 

Nie pracuję zbyt wiele na jQuery i nie wiem czy jest tam jQuerowy odpowiednik tej metody, ale zawsze można to zrobić bez jQ.

Podobne pytania

0 głosów
1 odpowiedź 40 wizyt
pytanie zadane 27 lipca w JavaScript, jQuery, AJAX przez SzymonSmith Początkujący (460 p.)
0 głosów
0 odpowiedzi 31 wizyt
0 głosów
1 odpowiedź 61 wizyt
pytanie zadane 21 marca 2016 w JavaScript, jQuery, AJAX przez demotywatorking Użytkownik (970 p.)
Obowiązuje już zaktualizowany regulamin.

Czy wiesz, że nie musisz już odświeżać strony głównej?

Lista pytań i odpowiedzi aktualizuje się automatycznie!

38,563 zapytań

76,428 odpowiedzi

149,241 komentarzy

18,032 pasjonatów

Przeglądających: 198
Pasjonatów: 5 Gości: 193

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...