Tutorial Belajar jQuery Part 10: Cara Menambah Baris Tabel HTML dengan jQuery

Posted on

Panduan jQuery kali ini lebih kepada latihan dari apa yang telah kita pelajari dari Tutorial Belajar jQuery Duniailkom Part 1-9. Disini saya akan menjelaskan cara membangun kode program yang dapat menambahkan baris tabel HTML secara dinamis dengan jQuery.


Mengambil Nilai HTML dan Menambahkannya di Tempat Lain

Kode program yang akan saya bikin yaitu bagaimana cara mengisi tabel dengan element yang digenerate dari jQuery. Berikut tampilan ahir yang saya inginkan:

Seperti yang terlihat, terdapat sebuah form input dari tag <input type=”text”>, sebuah tombol “Tambah Kota”, dan sebuah Tabel yang berisi nama-nama kota.

Saya ingin ketika kita mengisi nama kota ke di form dan men-klik tombol, nama kota tersebut akan tampil selaku baris baru di di tabel.

Bagaimana cara membuatnya?

Pertama-tama-tama, ketika tombol di klik, ambil nilai form. Ini dapat dilakukan menggunakan method val() jQuery. Simpan nilai ini ke di sebuah variabel. Berikutnya, nilai ini kita tambahkan ke di tabel menggunakan method append(). Tentu saja kita pun mesti menambahkan tag-tag yang diperlukan seperti <tr> dan <td> yang yaitu sebuah tag HTML untuk membangun sebuah baris tabel.

Berikut kode komplit yang saya gunakan:

Kode diatas sedikit panjang karena saya menambahkan beberapa baris kode CSS untuk membangun tampilan tabel lebih menarik.

Proses pemindahan nilai form ke di tabel sendiri hanya membutuhkan 3 baris:

  • Baris 1: Ambil nilai form, simpan ke variabel nilai.
  • Baris 2: Tambahkan tag <tr> dan <td> yang diperlukan untuk membangun baris tabel. Saya menggunakan operator ‘ + ’ yang di di JavaScript yakni operator penyambungan string. Simpan semuanya ke di variabel baris_baru.
  • Baris 3: Tambahkan isi variabel baris_baru ke di tabel menggunakan method append().

Silahkan rekan-rekan coba sendiri dengan link codepen dibawah ini:

See the Pen Cara Menambah Tabel HTML Secara Dinamis dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Yup, hanya dengan sekitar 5 baris kode program jQuery, kita telah dapat membangun program HTML dinamis. Inilah keuntungan menggunakan jQuery daripada JavaScript murni.

Silahkan rekan-rekan utak-atik kode diatas, misalnya dengan menambahkan tag input kedua atau menambahkan 1 lagi kolom tabel.

Berikutnya, saya akan membahas cara menghapus elemen HTML dengan jQuery.


Sumber https://www.duniailkom.com/