Menciptakan mesin generator tabel sederhana dengan javascript

Belajar pemrograman adalah belajar mempertajam kejelian dan ketelitian dalam memahami sebuah detail. Inilah inti dari tutorial ini. Untuk memahami sebuah detail bangunan yang rumit, tentu kita harus paham terlebih dahulu bahan utama penyusun bangunan tersebut secara terperinci. Begitu pula pemrograman, akan menjadi sangat rumit ketika seorang yang belum paham betul konsep dasar looping harus dihadapkan dengan looping bersarang (nested looping) yang memuat berbagai macam method dan percabangan. Ah, sudahlah intinya saya hanya ingin mengajak kalian untuk memahami sesuatu yang sederhana terlebih dahulu sebelum meloncat ke yang lebih rumit. Mari kita mencoba menggenerate tabel dengan javascript.

Pertama yang harus kamu pahami bahwa tabel memiliki bagian yang disebut baris dan kolom. Jika sebuah tabel diibaratkan kumpulan kotak-kotak, maka kotak yang tersusun mendatar merupakan baris, dan kotak tersusun vertikal adalah kolom. Perhatikan gambar di atas!

Dalam html, baris tabel dibentuk oleh element <tr> dan tiap baris memiliki data tabel/kolom yang dibentuk oleh element <td>. Coba amati struktur dasar tabel html di bawah

<table>
    <tr>
        <td>B1, K1</td>
        <td>B1, K2</td>
        <td>B1, K3</td>
    </tr> 
    <tr>
        <td>B2, K1</td>
        <td>B2, K2</td>
        <td>B2, K3</td>
    </tr>
    <tr>
        <td>B3, K1</td>
        <td>B3, K2</td>
        <td>B3, K3</td>
    </tr>
</table>

Jika kamu jeli disitu terlihat element tr dan td ditulis secara berulang. Hal ini penting untuk dipahami sebab kedua elemen inilah yang nantinya akan digenerate dengan looping script. Sederhana memang kalau hanya membuat beberapa baris dengan beberapa kolom saja, namun akan menjadi rumit jika tabel yang kita buat harus memuat data yang cukup banyak. Disinilah javascript berperan untuk mempermudah pekerjaan kita.

Permasalahan

Kamu ingin membuat tabel yang digenerate secara otomatis oleh javascript

Solusi

Di awal telah disinggung tentang element yang muncul secara berulang, logikanya mesin pencipta tabel yang hendak kamu buat harus mempunyai kemampuan untuk menulis element tersebut secara berulang sesuai dengan parameter yang kamu berikan.

Secara sederhana dapat digambarkan:

Tentukan parameter -> buat baris dan kolom berdasarkan parameter -> output tabel

Lebih Rinci

Buat dua variable untuk menampung baris dan kolom

var baris = 5, kolom = 6;

Buat satu variable lagi untuk menampung kode html tabel hasil generate. Isi dari variabel ini akan bertambah seiring berjalannya script, kamu bisa menggunakan operator += (pelajari tutorial menggabungkan string)

var tabel =  '<table>';

Lakukan perulangan dengan menggunakan for loop untuk menciptakan baris tabel (element tr) yang mengacu pada parameter di atas

for(i=0; i < baris; i++){
 
 // gunakan operator += untuk menambah isi var tabel
 tabel += '<tr>';

 // jangan lupa penutupnya
 tabel += '</tr>';
}

Sampai disini javascript telah berhasil menciptakan 5 element tr. Hal ini disebabkan karena parameter baris bernilai 5 (coba gunakan nilai lain).

Karena dalam setiap baris tabel memuat beberapa kolom data, maka yang harus kamu lakukan adalah membuat looping lagi untuk menciptakan beberapa element td. Letaknya dimana looping ini? ya tentunya letaknya di dalam looping pertama sebab elemen td terletak di dalam elemen tr.

var baris = 5, kolom = 6;
var tabel =  '<table>';

for(b=0; b < baris; b++){
 
 // gunakan operator += untuk menambah isi var tabel
 tabel += '<tr>';

 // ciptakan elemen td dalam tiap baris
 for(k=0; k < kolom; k++){
  tabel += '<td>' + (b+k) + '</td>';
 }

 // jangan lupa penutupnya
 tabel += '</tr>';
}

tabel += '</table>'; 
// tampilkan tabel pada element yang memiliki id 'hasil'
document.getElementById('hasil').innerHTML = tabel;

Sebenarnya script generate table sudah selesai sampai disini, namun kamu perlu membuat satu buah elemen html untuk menampung output dari mesin generator tersebut.

<div id="hasil">Tabel akan ditampilkan disini<div>

Tambahkan css agar tampilan tabel terlihat

table {
    border-collapse:collapse; 
}

td {
    padding:5px 15px;
    border:1px solid black;
}