Tabela z jQuery

pytanie zadane 13 września 2017 w JavaScript 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ź

odpowiedź 13 września 2017 przez sc4rface Dyskutant (7,710 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>");
	
	} 
	
});