Javascript

Jquery ile DOM Kullanarak Tablo Oluşturma

Jquery DOM ile oluşturulan tablo'ya veri girme

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>

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu