Posting blog ini akan menunjukkan proses pembuatan tabel dinamis dalam JavaScript.
Bagaimana Cara Membuat Tabel Secara Dinamis di JavaScript?
Mari kita lihat contoh yang menjelaskan bagaimana tabel dinamis akan dibuat dalam JavaScript.
Contoh
Untuk memulai, tulis baris berikut dalam dokumen HTML baru untuk membuat formulir yang mengambil data lalu menampilkannya dalam tabel dengan menambahkannya secara dinamis:
< id div = 'bentuk saya' >
< h4 > Isi formulir di bawah ini : h4 >
< label > Nama : label >
< tipe masukan = 'teks' Indo = 'nama' >< br >< br >
< label > Jenis kelamin : label >
< tipe masukan = 'teks' Indo = 'jenis kelamin' >< br >< br >
< label > Penamaan : label >
< tipe masukan = 'teks' Indo = 'penamaan' >< br >< br >
< label > Bergabung Tanggal : label >
< tipe masukan = 'tanggal' Indo = 'tanggal' >< br >< br >
< tombol id = 'menambahkan' nilai = 'Menambahkan' > Tambahkan Data ke Tabel tombol >
div >
Dalam cuplikan kode di atas:
- Pertama, buat tajuk “ Isi formulir di bawah ini: ”.
- Buat kolom input untuk “ Nama ”, “ Jenis kelamin ”, “ Penamaan ', dan ' Tanggal Bergabung ” dengan id yang ditetapkan “ nama ”, “ jenis kelamin ”, “ penamaan ', dan ' tanggal ” masing-masing, untuk mengambil nilai masukan dari pengguna.
- Id ini digunakan untuk mendapatkan referensi elemen dalam JavaScript.
- Kemudian, buat tombol dengan “ onclick ” properti yang akan memanggil “ tambahkanTableRow() ” dalam file skrip, untuk menambah dan menampilkan data dalam tabel:
Di sini, di file HTML, tulis baris kode berikut untuk membuat struktur tabel, tempat data akan ditambahkan secara dinamis:
< div >
< h4 > Catatan Karyawan b > h4 >
< tengah >
< tabel id = 'datatabel' berbatasan = '1' cellpadding = 'dua' >
< tr >
< td >< b > Nama b > td >
< td >< b > Jenis kelamin b > td >
< td >< b > Penamaan b > td >
< td >< b > Tanggal Bergabung b > td >
tr >
meja >
tengah >
div >
Dalam kode di atas:
- Buat tabel dengan id “ tableData ” yang akan digunakan dalam file skrip untuk mendapatkan referensi tabel ini dan kemudian menambahkan data ke dalamnya.
- Tabel tersebut berisi empat kolom, “ Nama ”, “ Jenis kelamin ”, “ Penamaan ', dan ' Tanggal Bergabung ” yang akan menyimpan data sesuai dengan nama kolom.
Menjalankan file HTML akan menghasilkan output browser berikut:
Mari tambahkan fungsionalitas untuk membuat tabel secara dinamis menggunakan JavaScript. Di file atau tag skrip, gunakan kode di bawah ini yang akan membuat tabel secara dinamis:
fungsi tambahkanTableRow ( ) {dulu nama = dokumen. getElementById ( 'nama' ) ;
dulu jenis kelamin = dokumen. getElementById ( 'jenis kelamin' ) ;
dulu penamaan = dokumen. getElementById ( 'penamaan' ) ;
dulu tanggal = dokumen. getElementById ( 'tanggal' ) ;
dulu meja = dokumen. getElementById ( 'datatabel' ) ;
dulu jumlah baris = meja. baris . panjangnya ;
dulu baris = meja. insertRow ( jumlah baris ) ;
baris. insertCell ( 0 ) . innerHTML = nama. nilai ;
baris. insertCell ( 1 ) . innerHTML = jenis kelamin. nilai ;
baris. insertCell ( dua ) . innerHTML = penamaan. nilai ;
baris. insertCell ( 3 ) . innerHTML = tanggal. nilai ;
}
Dalam cuplikan di atas:
- Pertama, tentukan fungsi “ tambahkanTableRow() ” yang akan memicu peristiwa klik tombol HTML.
- Kemudian, dapatkan referensi dari semua bidang input satu per satu menggunakan id yang ditetapkan masing-masing menggunakan ' getelementById() ” dan menyimpannya dalam variabel.
- Variabel-variabel ini akan digunakan untuk mendapatkan nilai dari field input menggunakan HTML “ nilai ” dan mengaturnya di sel individual dalam tabel menggunakan tombol “ innerHTML ' Properti.
- Tambahkan baris dalam tabel menggunakan ' tabel.baris.panjang ” properti dan kemudian menyimpan nilai di dalamnya.
Keluaran
Output di atas menunjukkan bahwa tabel dinamis berhasil dibuat dengan menambahkan data dalam formulir menggunakan JavaScript.
Kesimpulan
Tabel dinamis dibuat menggunakan properti HTML yang berbeda dengan metode standar JavaScript. Pertama, buat formulir dalam file HTML, lalu dapatkan referensi bidang menggunakan metode yang telah ditentukan JavaScript seperti ' getElementById() ” dan kemudian mengambil nilai yang dimasukkan menggunakan metode “ nilai ' Properti. Tetapkan nilai ini di kolom masing-masing tabel menggunakan ' innerHTML ' Properti. Posting blog ini menunjukkan proses pembuatan tabel dinamis dalam JavaScript.