Pertanyaan
. Untuk menambahkan kolom dengan tombol "Hapus" pada setiap baris tabel yang berasal darl array data, apa yang harus ditambahkan? A. Buat fungsi delete dan panggil di dalam loop. B. Tambahkan tag button di tabel secara langsung. C. Gunakan prompt untuk setiap kolom. D. Tampilkan data tanpa menggunakan tombol. XE E. Semua jawaban benar.
Solusi
Jawaban
Jawaban yang paling tepat adalah **A. Buat fungsi `delete` dan panggil di dalam loop.**Berikut penjelasannya:Opsi A adalah cara yang paling efisien dan terstruktur untuk menambahkan tombol "Hapus" pada setiap baris tabel yang berasal dari array data. Dengan membuat fungsi `delete`, kita dapat memisahkan logika penghapusan data dari proses rendering tabel. Fungsi ini kemudian dipanggil dalam loop yang mengiterasi melalui array data, sehingga setiap baris tabel akan memiliki tombol "Hapus" yang terkait dengan data baris tersebut. Ini memastikan kode terorganisir, mudah dibaca, dan mudah dipelihara.Opsi B (Menambahkan tag button langsung di tabel) kurang efisien dan dapat menyebabkan kode yang berantakan, terutama jika data dalam array besar. Opsi ini juga akan menyulitkan pengelolaan event penghapusan data.Opsi C (Menggunakan prompt untuk setiap kolom) tidak relevan dengan menambahkan tombol "Hapus". Prompt biasanya digunakan untuk input pengguna, bukan untuk menambahkan elemen antarmuka pengguna secara dinamis.Opsi D (Menampilkan data tanpa tombol) jelas bukan solusi yang diinginkan karena pertanyaan meminta penambahan tombol "Hapus".Opsi E salah karena hanya opsi A yang merupakan solusi yang tepat dan efisien.Contoh implementasi (menggunakan JavaScript dan HTML, sebagai ilustrasi):```javascriptfunction createTable(data) { const table = document.createElement('table'); data.forEach(item => { const row = table.insertRow(); const deleteCell = row.insertCell(); const deleteButton = document.createElement('button'); deleteButton.textContent = 'Hapus'; deleteButton.onclick = () => deleteRow(item); // Panggil fungsi delete deleteCell.appendChild(deleteButton); // Tambahkan sel lain untuk data item... }); document.body.appendChild(table);}function deleteRow(item) { // Logika untuk menghapus item dari array data dan memperbarui tabel console.log("Menghapus item:", item); // ... (Implementasi penghapusan data dari array dan update UI) ...}// Contoh dataconst myData = [ {id: 1, name: "Item 1"}, {id: 2, name: "Item 2"}, {id: 3, name: "Item 3"}];createTable(myData);```Kode di atas menunjukkan bagaimana fungsi `createTable` membuat tabel dan fungsi `deleteRow` menangani penghapusan baris. Fungsi `deleteRow` perlu diimplementasikan lebih lanjut sesuai dengan bagaimana data disimpan dan diperbarui (misalnya, menggunakan array, local storage, database, dll.).