JavaScript

JavaScript HTML Tablo Oluşturma

Bu javascript örneğinde DOM nesneleri kullanarak dinamik olarak Tablo oluşturma yapılmıştır.

Uygulama kodlarında geçen bir kaç tane javascript fonksiyonunun kullanımını açıklamam gerekiyor.

document.getElementById: HTML belgesindeki nesnelerin javascript tarafında temsil edilmeleri için kullanılmaktadır. Dökümanda temsil edilecek nesnenin ID değeri ile nesneyi çağırır.

document.createElement: HTML nesnesi oluşturmak için kullanılır. Bellek üzerinde dinamik olarak HTML nesnesi oluşturmak için kullanılır.

node.appendChild: node düğümüne parametre olarak gönderilen nesneyi ekler. HTML nesnelerinin içine başka nesneleri eklemek için kullanılır. Örnekte <table> içine <tr> ve <tr> içine de <td> nesnelerini eklemek için kullanılmıştır.

Uygulamanın çalışan hali aşağıdaki gibi olacaktır.

JavaScript HTML Tablo Oluşturma

İlk olarak HTML nesneleri ile belgemizi oluşturuyoruz. HTML nesnelerini oluştururken dikkat edilmesi gereken nokta nesnelerin id değerleridir. Aşağıdaki gibi 2 tane text ve bir tane button nesnesi ile ekranda gösterilmek üzere bir tane div nesnsi oluşturulmuştur.

 

Sonraki adımda #olustur butonuna bastığımızda kodların çalışması için gerekli onclik olayını bir fonksiyona aşağıdaki gibi bağlıyoruz.

 

Text nesnelerinde değerleri okumak için text nesnelerinin id değerleri ile içindeki sayıları alıp, bir tane sayaç oluşturuyoruz.

 

Bu aşamadan sonraki kodların tamamı satır ve sütunları oluşturmak için yazılmış iç içe for döngülerini göstermektedir.

Ayrıca table nesnesini oluşturup ilk for döngüsünde table nesnesine tr etiketlerini oluşturup ekliyoruz. İkinci for döngüsünde ise td etiketlerini oluşturup bunları da tr etiketlerine ekliyoruz.

 

Uygulama kodlarının son hali aşağıdaki gibi olacaktır.

 

 

Yorum bırak