• 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
94 wizyt
pytanie zadane 13 września 2017 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 2017 przez sc4rface Mądrala (6,510 p.)
wybrane 13 września 2017 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 2017 przez Caesar Początkujący (310 p.)

Jesteś bogiem jQuery! laugh

komentarz 13 września 2017 przez Tomek Sochacki Nałogowiec (36,230 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
0 odpowiedzi 33 wizyt
pytanie zadane 23 maja 2017 w PHP, Symfony, Zend przez Zbigniew Andrysiak Bywalec (2,240 p.)
0 głosów
1 odpowiedź 44 wizyt
pytanie zadane 27 lipca 2017 w JavaScript, jQuery, AJAX przez SzymonSmith Użytkownik (670 p.)
0 głosów
1 odpowiedź 62 wizyt
pytanie zadane 21 marca 2016 w JavaScript, jQuery, AJAX przez demotywatorking Obywatel (1,210 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.
Ciekawy innych porad? Odwiedź tę stronę!

45,562 zapytań

85,891 odpowiedzi

171,410 komentarzy

22,067 pasjonatów

Przeglądających: 205
Pasjonatów: 0 Gości: 205

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.

...