Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat tabel di JavaScript bisa menjadi tantangan tersendiri terutama bagi pemula. Namun, jangan khawatir! Artikel ini akan membimbing kamu menyelesaikan tugas tersebut dengan langkah-langkah yang mudah dipahami dan diikuti.
Sebelum kita mulai membuat tabel menggunakan JavaScript, kita harus membuat kerangka dasar menggunakan HTML. JavaScript akan mengubah dan memanipulasi HTML ini untuk membuat tabel.
Berikut adalah contoh kode HTML sederhana:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table id="myTable">
</table>
</body>
</html>Perhatikan bahwa kita membuat tabel dengan id="myTable". Ini adalah cara kita akan merujuk ke tabel ini nanti di dalam JavaScript.
Sekarang saatnya kita menulis kode JavaScript untuk mengisi tabel HTML tersebut. Pertama-tama, kita perlu membuat fungsi yang akan mengisi tabel tersebut.
function createTable() {
// Access the table
var table = document.getElementById("myTable");
// Create a new row
var row = table.insertRow(0);
// Create two new cells
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Fill the cells with data
cell1.innerHTML = "Nama";
cell2.innerHTML = "Email";
}Fungsi ini melakukan hal berikut, dalam urutan:
Mengakses tabel HTML yang kita buat sebelumnya (menggunakan id).
Membuat baris baru di tabel tersebut.
Membuat dua sel baru dalam baris tersebut.
Mengisi sel-sel tersebut dengan data.
Setelah kita memiliki fungsi yang membangun tabel, kita perlu memanggil fungsi tersebut agar berjalan. Kita bisa melakukan ini di dalam tag script HTML, seperti ini:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table id="myTable">
</table>
<script>
createTable();
</script>
</body>
</html>Dengan begitu, begitu halaman dimuat, fungsi JavaScript createTable() akan dieksekusi, mengisi tabel HTML dengan data.
Selesai! Dengan begitu, kamu sudah berhasil membuat tabel di JavaScript. Tentu saja, ini hanyalah cara dasar dan sederhana untuk melakukan hal tersebut. Kamu dapat memodifikasi dan menambahkan lebih banyak lagi ke dalam fungsi createTable() seperti menambahkan lebih banyak sel, baris, dan data ke dalam tabel.
Link terkait: