Anda di halaman 1dari 5

http://www.klikedukasi.com/2014/01/generate-tabel-dengan-javascript.

html
Menciptakan mesin generator tabel sederhana dengan javascript

Oleh: Unknown

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;
}

Kirimkan Ini lewat EmailBlogThis!Berbagi ke TwitterBerbagi ke Facebook