Cara Membuat Tabel Dinamis Menggunakan Javscript
Seperti yang sahabat tahu JavaScript yaitu bahasa pemrograman yang digunakan bagi membangun halaman web interaktif. Javascript berjalan secara client side atau yang lebih tepat javascript berjalan di browser sahabat masing-masing dan tak perlu di jalankan di sisi server. Di panduan kali ini saya akan mencoba berbagi Cara Membuat Tabel Dinamis Menggunakan Javscript.
Pada kasus ini saya akan menggunakan diantara tag dari html yaitu tag table, tr dan td, dimana kita akan melooping baris dan kolom bagi mempermudah kita membangun suatu tabel. Ok, seketika saja saya akan memberikan strategi Cara Membuat Tabel Dinamis Menggunakan Javscript:
1. Pertama-tama
Buka text editor sahabat lalu bikin lembar file baru, dan ketikan kode html di bawah ini:
/**
<!DOCTYPE html>
<html>
<head>
<title>Tabel | Javascript</title>
</head>
<body>
<table border=1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
*/
coba teman-teman buka file htmlnya di browser teman-teman karenanya akan tampil tabel seperti gambar di abwah ini:
2. Kedua
Gambar di atas yaitu tabel yang kita bikin manual sekarang ini kita akan membangun tabel secara dinamais dengan membangun proses perulangan berikut kode javascriptnya:
/**<br /><script>
var table = '';
var rows = 2;
var cols = 3;
for(var r = 0; r < rows; r++)
{
table +='<tr>';
for(var a = 1; a <= cols; a++){
table +='<td>' + a + '</td>';
}
table +='</tr>';
}
document.write('<table border=1>' + table + '</table>');<br /></script>
*/
sekarang ini teman-teman refresh file html yang telah di buka karenanya akan tampil tabel dinamis yang telah kita bikin.
Bagaimana lumayan mudahkan pada Cara Merancang Tabel Dinamis Menggunakan Javscript. Dengan javascript kita tak hanya dapat melooping suatu faktor melainkan dapat pun memberikan animasi yang bagus bagi tampilan situs kita.
Demikian panduan mengenai Cara Membuat Tabel Dinamis Menggunakan Javscript. Semoga bermanfaat untuk teman-teman.
Sumber https://kursuswebsite.org
