Jquery ile dinamik tablo oluşturma

jQuery ile dinamik olarak html tablo oluşturmak bazen gerekli olabilir. Mesela Ajax destekli web projelerinde sayfayı parçalı yenilyorsanız gerekli olabilir. Bunu yaparken aynı zamanda jQuery kütüphanesini kullanarak html eleman oluşturmayı da yapmış olacağız. Basit bir örnekle jQuery ile dinamik olarak 10x5 (10 satır, 5 sütun) boyutunda bir tablo oluşturacağız.

Bir javascript kütüphanesi olan jQuery ile tanışmadıysanız buradan jQuery'nin resmi sitesine girip dökümanlara ve örnekle bakabilirsiniz.

Önce bilgisayarımızda boş bir html dosyası oluşturulım ( jqueryTablo.html ) ve aşağıdaki jQuery ve html kodumuzu oluşturduğumuz sayfaya kopyalayalım.
<html>
<head>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){

    // table elemanı oluşturuyoruz
    var table = $('<table>');
    // x satır sayısını, y sütun sayısını temsil ediyor
    var x,y;
    // her satır ve sütunu tabloya eklerken aşağıdaki
    // geçici (temp) değişkenlerden yararlanacağız.
    var tempTr,tempTd;
    // ilk for döngüsü satırlar için
    for (x=0;x<10;x++)
    {    
        // satır elemanını (<tr>) oluşturuyoruz
        tempTr=$('<tr>');
        // ikinci for döngüsü sütunları eklemek için
        for (y=0;y<5;y++)
        {
        // sütun elemanını (<td>) oluşturuyoruz
        tempTd=$('<td>');
        // her sütuna .append fonksiyonu ile içerik ekliyoruz
        tempTd.append((x+1)+'. satır '+(y+1)+'. sütun' );
        // satıra sütun (<td>) elemanını ekliyoruz
        tempTr.append(tempTd);
        // tablomuza satır (<tr>) elemanını ekliyoruz
        table.append(tempTr);
        }
    }
    // son olarak body elemanı içine tablomuzu ekliyoruz
    $('body').append(table);
  });
  </script>
  <!-- sütunları daha iyi görmek için arka fon 
  rengini da değiştiriyoruz --> 
  <style>
  
  td {
  background-color:#99CCFF;
  }
  
  </style>
</head>
<body>
</body>
</html>
Sonuç :

Jquery ile dinamik tablo oluşturma

Dinamik olarak html elemanı oluşturmanın bazı avantajaları var. Mesela içeriği sayfa yenilenmeden (Ajax destekli web projeleri) ya da kullanıcı tarafında html sayfasını oluşturarmak sunucu üzerindeki yükü bir miktar azaltır. Tabii ki bu her zamanki gibi sizin keyfinize kalmış.
yazan Zülküf Küçüközer tarih   18th December 2009
primary key words  Jquery | Dinamik | Tablo oluşturma okunma  15506
secondary key words  Html sayfa | Ajax | Web
Bu yazı hakkında yorum yapılmamış.