Bu yazıda Javascript taraflı, yönetilmesi daha kolay olan Jquery DOM (Document Object Model) yapısından yararlanılarak HTML TABLE yani tablo oluşturma örneğini paylaşacağım. Aynı zamanda dizi içindeki verileri nasıl kullanabileceğinizi de anlayacaksınız. Aşağıda size gereken tüm örnekleri ve kodları paylaştım.
Canlı Demo
Aşağıdaki kaynak kodlar “Html + CSS + JS “ ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.
KAYNAK KODLAR İÇİN
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
<TITLE>Furkan DEMİRCİ | Jquery ile DOM Kullanılarak Tablo Doldurma</TITLE>
</head>
<body>
<table class="table table-striped table-bordered" style="width:65%; margin:auto; margin-top:15px;">
<thead>
<tr>
<th>Plaka</th>
<th>Şehir</th>
<th>İlçe</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
var dizi=[{ad:'Adana',kod:'01',ilce:'Çukurova'},{ad:'Adıyaman',kod:'02',ilce:'Besni'},{ad:'Afyon',kod:'03',ilce:'Sandıklı'}];
var DOM='';
for (var i in dizi){
var item=dizi[i];
DOM +="<tr>";
DOM +="<td>" + item.kod + "</td>";
DOM +="<td>" + item.ad + "</td>";
DOM +="<td>" + item.ilce + "</td>";
DOM +="</tr>";
}
$("table tbody").html(DOM);
</script>
</body>
</html>
