Bu blog gönderisi, JavaScript'te dinamik bir tablo oluşturma sürecini gösterecek.
JavaScript'te Dinamik Olarak Tablo Nasıl Oluşturulur?
JavaScript'te dinamik bir tablonun nasıl oluşturulacağını açıklayan bir örnek görelim.
Örnek
Başlamak için, verileri alan ve ardından verileri dinamik olarak ekleyerek bir tabloda gösteren bir form oluşturmak için yeni bir HTML belgesine aşağıdaki satırları yazın:
< div kimliği = 'benim biçimim' >
< h4 > Aşağıdaki formu doldurun : h4 >
< etiket > İsim : etiket >
< giriş tipi = 'Metin' İD = 'isim' >< br >< br >
< etiket > Cinsiyet : etiket >
< giriş tipi = 'Metin' İD = 'Cinsiyet' >< br >< br >
< etiket > atama : etiket >
< giriş tipi = 'Metin' İD = 'atama' >< br >< br >
< etiket > birleştirme Tarih : etiket >
< giriş tipi = 'tarih' İD = 'tarih' >< br >< br >
< düğme kimliği = 'Ekle' değer = 'Ekle' > Tabloya Veri Ekle buton >
div >
Yukarıdaki kod parçacığında:
- İlk olarak, bir başlık oluşturun “ Aşağıdaki formu doldurun: ”.
- “ için giriş alanları oluşturun İsim ”, “ Cinsiyet ”, “ atama ', ve ' Katılma Tarihi ” atanan kimlik ile “ isim ”, “ Cinsiyet ”, “ atama ', ve ' tarih kullanıcıdan giriş değerlerini almak için sırasıyla ”.
- Bu kimlikler, JavaScript'teki öğelerin referansını almak için kullanılır.
- Ardından, “ ile bir düğme oluşturun. tıklamada '' adını verecek özellik addTableRow() Bir tablodaki verileri eklemek ve göstermek için bir betik dosyasında ” işlevi:
Burada, HTML dosyasında, verilerin dinamik olarak ekleneceği bir tablo yapısı oluşturmak için şu kod satırlarını yazın:
< div >
< h4 > Çalışan Kaydı b > h4 >
< merkez >
< tablo kimliği = 'tabloVerileri' sınır = '1' hücre dolgusu = 'iki' >
< tr >
< td >< b > İsim b > td >
< td >< b > Cinsiyet b > td >
< td >< b > atama b > td >
< td >< b > Katılım Tarihi b > td >
tr >
masa >
merkez >
div >
Yukarıdaki kodda:
- “idine sahip bir tablo oluşturun. tabloVeri Bu tablonun referansını almak ve ardından verileri tabloya eklemek için komut dosyasında kullanılacaktır.
- Tablo dört sütun içerir, “ İsim ”, “ Cinsiyet ”, “ atama ', ve ' Katılım Tarihi sütun adlarına göre verileri depolayacak.
HTML dosyasını çalıştırmak, aşağıdaki tarayıcı çıktısına neden olur:
JavaScript kullanarak dinamik olarak tablolar oluşturmak için işlevsellik ekleyelim. Betik dosyasında veya etiketinde, dinamik olarak bir tablo oluşturacak aşağıdaki kodu kullanın:
işlev tablo satırı ekle ( ) {öyleydi isim = belge. getElementById ( 'isim' ) ;
öyleydi Cinsiyet = belge. getElementById ( 'Cinsiyet' ) ;
öyleydi atama = belge. getElementById ( 'atama' ) ;
öyleydi tarih = belge. getElementById ( 'tarih' ) ;
öyleydi masa = belge. getElementById ( 'tabloVerileri' ) ;
öyleydi satır Sayısı = masa. sıralar . uzunluk ;
öyleydi sıra = masa. satır ekle ( satır Sayısı ) ;
sıra. ekleHücre ( 0 ) . içHTML = isim. değer ;
sıra. ekleHücre ( 1 ) . içHTML = Cinsiyet. değer ;
sıra. ekleHücre ( iki ) . içHTML = atama. değer ;
sıra. ekleHücre ( 3 ) . içHTML = tarih. değer ;
}
Yukarıdaki parçada:
- İlk olarak, bir işlev tanımlayın ' addTableRow() HTML düğmesinin tıklama olayını tetikleyecektir.
- Ardından, ilgili atanmış kimliklerini kullanarak tüm giriş alanlarının referansını tek tek alın. getelementById() ” yöntemini seçin ve bunları değişkenlerde saklayın.
- Bu değişkenler, HTML ' kullanarak giriş alanlarının değerini almak için kullanılacaktır. değer ” özelliğini kullanın ve bunları tablodaki tek tek hücrelere “ kullanarak ayarlayın. içHTML ' Emlak.
- “ Kullanarak bir tabloya satır ekleyin. tablo.satırlar.uzunluk ” özelliği ve ardından içindeki değerleri depolayın.
Çıktı
Yukarıdaki çıktı, JavaScript kullanılarak bir forma veri eklenerek dinamik tablonun başarıyla oluşturulduğunu gösterir.
Çözüm
Dinamik tablo, JavaScript önceden tanımlanmış yöntemlerle farklı HTML özellikleri kullanılarak oluşturulur. İlk olarak, bir HTML dosyasında bir form oluşturun ve ardından '' gibi önceden tanımlanmış JavaScript yöntemlerini kullanarak alanların referansını alın. getElementById() ” yöntemini kullanın ve ardından “ kullanarak girilen değerleri alın. değer ' Emlak. Bu değerleri bir tablonun ilgili sütunlarında “ içHTML ' Emlak. Bu blog gönderisi, JavaScript'te dinamik bir tablo oluşturma sürecini gösterir.