Catatan blog ini akan menunjukkan proses untuk mencipta jadual dinamik dalam JavaScript.
Bagaimana untuk Membuat Jadual Secara Dinamik dalam JavaScript?
Mari lihat contoh yang menerangkan cara jadual dinamik akan dibuat dalam JavaScript.
Contoh
Untuk bermula, tulis baris berikut dalam dokumen HTML baharu untuk mencipta borang yang mengambil data dan kemudian tunjukkan dalam jadual dengan menambahkannya secara dinamik:
< id div = 'bentuk saya' >
< h4 > Isi borang di bawah : h4 >
< label > Nama : label >
< jenis input = 'teks' ID = 'nama' >< br >< br >
< label > Jantina : label >
< jenis input = 'teks' ID = 'jantina' >< br >< br >
< label > Jawatan : label >
< jenis input = 'teks' ID = 'penamaan' >< br >< br >
< label > Menyertai Tarikh : label >
< jenis input = 'Tarikh' ID = 'Tarikh' >< br >< br >
< id butang = 'Tambah' nilai = 'Tambah' > Tambah Data pada Jadual butang >
div >
Dalam coretan kod di atas:
- Pertama, buat tajuk ' Isi borang di bawah: ”.
- Cipta medan input untuk “ Nama ”, “ Jantina ”, “ Jawatan ”, dan “ Tarikh Menyertai 'dengan id yang ditetapkan' nama ”, “ jantina ”, “ jawatan ”, dan “ Tarikh ” masing-masing, untuk mengambil nilai input daripada pengguna.
- Id ini digunakan untuk mendapatkan rujukan elemen dalam JavaScript.
- Kemudian, buat butang dengan ' onclick ” harta yang akan memanggil “ addTableRow() ” dalam fail skrip, untuk menambah dan menunjukkan data dalam jadual:
Di sini, dalam fail HTML, tulis baris kod ini untuk mencipta struktur jadual, di mana data akan ditambah secara dinamik:
< div >
< h4 > Rekod Pekerja b > h4 >
< pusat >
< id jadual = 'tableData' sempadan = '1' padding sel = 'dua' >
< tr >
< td >< b > Nama b > td >
< td >< b > Jantina b > td >
< td >< b > Jawatan b > td >
< td >< b > Tarikh Menyertai b > td >
tr >
meja >
pusat >
div >
Dalam kod di atas:
- Buat jadual dengan id ' tableData ” yang akan digunakan dalam fail skrip untuk mendapatkan rujukan jadual ini dan kemudian menambah data padanya.
- Jadual mengandungi empat lajur, ' Nama ”, “ Jantina ”, “ Jawatan ”, dan “ Tarikh Menyertai ” yang akan menyimpan data mengikut nama lajur.
Menjalankan fail HTML akan menghasilkan output penyemak imbas berikut:
Mari tambahkan fungsi untuk membuat jadual secara dinamik menggunakan JavaScript. Dalam fail skrip atau teg, gunakan kod di bawah yang akan membuat jadual secara dinamik:
fungsi addTableRow ( ) {adalah nama = dokumen. getElementById ( 'nama' ) ;
adalah jantina = dokumen. getElementById ( 'jantina' ) ;
adalah jawatan = dokumen. getElementById ( 'penamaan' ) ;
adalah Tarikh = dokumen. getElementById ( 'Tarikh' ) ;
adalah meja = dokumen. getElementById ( 'tableData' ) ;
adalah rowCount = meja. barisan . panjang ;
adalah barisan = meja. insertRow ( rowCount ) ;
barisan. insertCell ( 0 ) . innerHTML = nama. nilai ;
barisan. insertCell ( 1 ) . innerHTML = jantina. nilai ;
barisan. insertCell ( dua ) . innerHTML = jawatan. nilai ;
barisan. insertCell ( 3 ) . innerHTML = Tarikh. nilai ;
}
Dalam coretan di atas:
- Pertama, tentukan fungsi ' addTableRow() ” yang akan mencetuskan peristiwa klik butang HTML.
- Kemudian, dapatkan rujukan semua medan input satu demi satu menggunakan id yang ditetapkan masing-masing menggunakan ' getelementById() ” kaedah dan simpannya dalam pembolehubah.
- Pembolehubah ini akan digunakan untuk mendapatkan nilai medan input menggunakan HTML “ nilai ” dan tetapkannya dalam sel individu dalam jadual menggunakan “ innerHTML ” harta benda.
- Tambah baris dalam jadual menggunakan ' jadual.baris.panjang ” harta dan kemudian menyimpan nilai di dalamnya.
Pengeluaran
Output di atas menunjukkan bahawa jadual dinamik berjaya dibuat dengan menambahkan data dalam bentuk menggunakan JavaScript.
Kesimpulan
Jadual dinamik dibuat menggunakan sifat HTML yang berbeza dengan kaedah JavaScript yang dipratakrifkan. Mula-mula, buat borang dalam fail HTML dan kemudian dapatkan rujukan medan menggunakan kaedah pratakrif JavaScript seperti ' getElementById() ' kaedah dan kemudian dapatkan nilai yang dimasukkan menggunakan ' nilai ” harta benda. Tetapkan nilai ini dalam lajur jadual masing-masing menggunakan ' innerHTML ” harta benda. Catatan blog ini menunjukkan proses untuk mencipta jadual dinamik dalam JavaScript.