MUAZHAN
Home

Add Table Row Dynamically Javascript

5 min read Jun 22, 2024
Add Table Row Dynamically Javascript

Cara Menambahkan Baris Tabel Secara Dinamis dengan JavaScript

Dalam pengembangan web, sering kali kita perlu memanipulasi tabel HTML secara dinamis berdasarkan interaksi pengguna atau data yang diambil secara asinkron. Salah satu manipulasi yang umum dilakukan adalah menambahkan baris tabel secara dinamis menggunakan JavaScript. Artikel ini akan membahas tentang cara menambahkan baris tabel secara dinamis dengan JavaScript.

1. Membuat Struktur Tabel Dasar

Pertama, kita perlu membuat struktur tabel HTML dasar yang akan kita manipulasi. Misalnya, kita akan membuat tabel sederhana untuk menampilkan daftar nama dan alamat:


  
    

      Nama
      Alamat

2. Menambahkan Baris Tabel Baru

Selanjutnya, kita akan membuat fungsi JavaScript untuk menambahkan baris tabel baru. Fungsi ini akan menambahkan baris baru ke bagian <tbody> dari tabel:

function addRow() {
  var table = document.getElementById("myTable");
  var newRow = table.insertRow();

  // Menambahkan sel data untuk nama
  var cell1 = newRow.insertCell();
  var nameInput = document.createElement('input');
  nameInput.type = 'text';
  cell1.appendChild(nameInput);

  // Menambahkan sel data untuk alamat
  var cell2 = newRow.insertCell();
  var addressInput = document.createElement('input');
  addressInput.type = 'text';
  cell2.appendChild(addressInput);
}

Kode di atas melakukan hal berikut:

  • var table = document.getElementById("myTable");: Mendapatkan elemen tabel dengan id myTable.
  • var newRow = table.insertRow();: Menambahkan baris baru ke dalam tabel.
  • var cell1 = newRow.insertCell();: Menambahkan sel pertama ke dalam baris baru.
  • var nameInput = document.createElement('input');: Membuat elemen input teks untuk nama.
  • cell1.appendChild(nameInput);: Menambahkan elemen input teks ke dalam sel pertama.
  • var cell2 = newRow.insertCell();: Menambahkan sel kedua ke dalam baris baru.
  • var addressInput = document.createElement('input');: Membuat elemen input teks untuk alamat.
  • cell2.appendChild(addressInput);: Menambahkan elemen input teks ke dalam sel kedua.

3. Memanggil Fungsi addRow()

Sekarang, kita perlu memanggil fungsi addRow() ketika pengguna ingin menambahkan baris baru. Misalnya, kita dapat menambahkan tombol dengan atribut onclick yang memanggil fungsi addRow():

4. Contoh Lengkap

Berikut adalah contoh kode lengkap yang menggabungkan semua bagian yang telah dijelaskan di atas:




  Menambahkan Baris Tabel Secara Dinamis





  
    

      Nama
      Alamat

Kode ini akan menampilkan tabel dengan tombol "Tambah Baris". Setiap kali tombol diklik, baris baru dengan dua input teks untuk nama dan alamat akan ditambahkan ke dalam tabel.

5. Kesimpulan

Menambahkan baris tabel secara dinamis dengan JavaScript memungkinkan kita untuk membuat antarmuka web yang lebih interaktif dan dinamis. Dengan menggunakan metode insertRow() dan insertCell(), kita dapat dengan mudah menambahkan baris tabel baru dan mengisinya dengan elemen HTML yang diinginkan.

Javascript

Latest Posts

Featured Posts