Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

Cara Membuat Tabel Dinamis Menggunakan Javscript

$
0
0

Seperti yang anda tahu JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. Javascript berjalan secara client side atau yang lebih tepat javascript berjalan di browser anda masing-masing dan tidak perlu di jalankan di sisi server. Pada tutorial kali ini saya akan mencoba berbagi Cara Membuat Tabel Dinamis Menggunakan Javscript.

Dalam kasus ini saya akan menggunakan salah satu tag dari html yaitu tag table, tr dan td, dimana kita akan melooping baris dan kolom untuk memudahkan kita membuat suatu tabel. Ok, langsung saja saya akan memberikan langkah-langkah Cara Membuat Tabel Dinamis Menggunakan Javscript:

1. Pertama

Buka text editor anda lalu buat 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 maka akan tampil tabel seperti gambar di abwah ini:

Cara Membuat Tabel Dinamis Menggunakan Javascript

2. Kedua

Gambar di atas adalah tabel yang kita buat manual sekarang kita akan membuat tabel secara dinamais dengan membuat 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 teman-teman refresh file html yang telah di buka maka akan tampil tabel dinamis yang telah kita buat.

Cara Membuat Tabel Dinamis Menggunakan Javascript

Bagaimana cukup mudahkan dalam Cara Membuat Tabel Dinamis Menggunakan Javscript. Dengan javascript kita tidak hanya dapat melooping suatu elemen melainkan dapat juga memberikan animasi yang bagus untuk tampilan website kita.

Sekian tutorial tentang Cara Membuat Tabel Dinamis Menggunakan Javscript. Semoga bermanfaat bagi teman-teman.

The post Cara Membuat Tabel Dinamis Menggunakan Javscript appeared first on Kursus Website Terbaik.


Viewing all articles
Browse latest Browse all 2170

Trending Articles