Menampilkan Data Dari Form ke Tabel Secara Dinamis

Assalamualaikum Wr. Wb


     Pada kesempatan kali ini saya akan berbagi tentang "Menampilkan data Dari Form Ke Tabel Secara Dinamis". Materi kali ini adalah JavaScript, dengan JavaScript kita bisa membuat atau menampilkan data dari kita mulai input sampai tampil pada tabel dan datanya bersifat dinamis atau bisa di rubah-rubah.


   Komponen yang kita butuhkan

1. Buat file ber ekstensi HTML
2 Link Bootstrap online (Bootstrap.cdn).
3. Link Jquery online     (cdnjs).


Langsung saja kita praktekan !!!

1. Buat file dengan nama sesuai kebutuhan  (kali ini saya membuat file bernama jqtabel).

   

2. Deklarasikan Html dan tulis script berikut ini untuk membuat Form Input Data

     

3. Jika sudah, di bawah tag tutup  Form kita buat Tabel untuk tempat tampil data. contoh script nya seperti dibawah

   

4. Jika anda sudah membuat Form Input dan Tabel, secara tampilan anda sudah berhasil namun untuk fungsi -fungsi yang kita inginkan belum tersedia. Tentu saja kita harus membuat Sebuah Script untuk JavaScript untuk membuat fungsi tersebut bisa terealisasi.

    a. Di bawah ini adalah script untuk jika kita mengklik tombol simpan, maka data akan di tampilakan pada tabel yang kita buat.

   

    b. Di bawah ini adalah contoh script untuk fungsi hapus data. Yaitu dengan kita mengklik tombol Delete, data yang ada di dalam tabel akan hilang atau terhapus. Di bawah ini kita bisa memilih atau menyeleksi data mana yang ingin kita hapus.

 

Setelah kita membuat beberapa komponen tersebut, lalu buka pada peramban favorit kita. Peramban favorit saya adalah Google Chrome, meskipun banyak menggunakan RAM atau memakan banyak ruang pada RAM tetapi saya suka.

Hasil atau tampilan pada peramban 

Pada tampilan di atas, kita bisa menuliskan sebuah data dan jika kita ingin menampilkan data tersebut pada tabel maka kita cukup klik tombol Save. Data pun secara otomatis akan tersimpan atau muncul pada tabel yang kita buat tadi.

Misal terdapat banyak data yang sudah kita input kan, dan ternyata kita mendapati data yang salah atau keliru. Kita bisa menyeleksi data yang ingin kita hapus dengan mencentang atau men cheklist data lalu kita tekan tombol hapus. Contoh seperti di bawah ini

Demikian lah materi yang bisa saya bagikan kepada anda-anda semua. Semoga bisa bermanfaat bagi anda yang belum tau dan semoga menjadi hiburan bagi anda yang sudah Expert dalam bidang CODING.  "Sebagus-bagus karya pasti ada yang tidak suka, Sejelek-jelek karya pasti ada yang suka. Jadi tunggu apa lagi MULAI DARI SEKARANG!!! "

Assalamualaikum Wr. Wb.