(HTML) Membuat Tabel Sementara Menggunakan Javascript
Kali
ini Dettline akan menjelaskan bagaimana “caranya
untuk menginput data kedalam tabel tanpa menggunakan database”. Cara yang
digunakan juga sangatlah sederhana, sobat hanya perlu menambahkan beberapa baris
codingan javascript. Namun data yang nantinya sobat masukkan ini sifatnya hanya
sementara. Sehingga ketika sobat merefresh ulang laman tersebut, data yang
dimasukan tadi akan hilang. Hhhmm tidak permanen ya!? Benarkah isi artikel ini
yang sobat cari? Sebenarnya artikel ini Dettline buat berdasarkan tugas yang
admin pernah terima di kampus. Mungkin saat ini ada diantara sobat Dettline
yang sedang mencarinya. Semoga bisa menjadi solusi untuk sobat.
Buat Format HTML dan Javascript
Strukturnya
hampir sama dengan artikel Dettline sebelumnya, yaitu tentang “Membuat Validasi Input Menggunakan Javascript”.
Kolom yang diisi hanya pada kolom NIM dan NAMA saja. Sedangkan kolom AGAMA menggunakan
menu combobox. Tombol SIMPAN dan ULANGI menggunakan type “button” dan ”reset”.
Kodingan
yang dibuat juga sebenarnya tidak jauh berbeda dengan artikel sebelumnya. Hanya
ada sedikit pengurangan dan penambahan saja. Hasil perubahan yang Dettline
lakukan isinya seperti dibawah ini. Simpan file tersebut dengan nama tutor.html
<html>
<head>
<title>Dettline</title>
<script
src='javascript_tabel.js'></script>
</head>
<body>
<form name='biodata'
method='post' action='tutor.html'>
<pre>
Nim : <input type='number' name='nim'>
Nama : <input type='text' name='nama' >
Agama : <select name='agama'>
<option>Islam
<option>Hindu
<option>Budha
<option>Kristen
<option>Konghucu
</select>
</pre>
<input type='button'
onClick='terimainput()' value='Simpan'>
<input type='reset' value='Ulangi'>
</form>
<table border='1'
id='tabelinput'>
<tr>
<td>NIM</td>
<td>NAMA</td>
<td>AGAMA</td>
</tr>
</table>
</body>
</html>
Perbedaan yang paling mencolok
dari artikel sebelumnya adalah format yang ada pada TAG <table>. Gunanya
TAG tersebut adalah untuk menampilkan data yang telah sobat input sebelumnya.
Atribut id yang ada di dalam TAG table
digunakan sebagai selector penghubung javascript. Dengan id tersebut, javascript akan memiliki
hak akses untuk memanipulasi tabel tersebut.
*Ket: bila sobat ingin
menambahkan CSS di dalam tabel yang memiliki selector id tersebut. Sebaiknya sobat menggunakan selector CSS Class. Agar tidak mengganggu selector antara
CSS dan Javascript.
Yang perlu sobat perhatikan di sini adalah atribut name yang ada didalam TAG <form>
dan TAG <input>. Keduanya digunakan untuk identifikasi atau pemberian
nama agar javascript dapat mengaksesnya dan menerima inputannya.
Sedangkan
atribut onClick didalam tombol/button,
digunakan untuk meletakkan function javascript.
Berikut adalah isi dari coding javascript. Simpanlah di lokasi penyimpanan yang
sama dengan file html diatas lalu simpan dengan nama javascript_tabel.js.
function terimainput(){
var x=document.forms['biodata']['nim'].value;
var y=document.forms['biodata']['nama'].value;
var z=document.forms['biodata']['agama'].value;
var tabel =
document.getElementById("tabelinput");
var row = tabel.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = x;
cell2.innerHTML = y;
cell3.innerHTML = z;
}
Function terimainput() merupakan fungsi yang akan digunakan oleh tombol
Simpan yang terdapat pada file tutuor.html.
Saat tombol tersebut di-klik maka isi dari function terimainput() akan di-eksekusi atau dijalankan.
Lalu var x, var y, var z adalah nama variabel yang menerima isi dari
data nim (var x), nama (var y) dan agama (var z). Sedangkan penulisan “biodata”
adalah identifikasi dari TAG <form> yang ada di dalam file tutor.html. Maksudnya adalah variabel
x,y dan z akan mengambil data dari formulir biodata, dan masing-masing
diantaranya mempunyai peran penting untuk mengolah data tertentu (nim, nama,
agama).
var tabel
adalah nama variabel untuk mewakili tabel yang memiliki id
“tabelinput” yang ada didalam tutor.html.
Sedangkan var row digunakan untuk
menambahkan baris pada tabel tersebut, dan kolomnya diwakili oleh variabel var cell1, var cell2, dan var cell3. Selanjutnya var cell1, var cell2, dan var cell3 diisi dengan variabel x, y dan z.
Uji Coba
Setelah
dua file tersebut telah sobat buat, sekarang silakan jalankan file tutor.html lalu cobalah sobat praktikan,
Bisakah tampil seperti ini?
Berhasil bukan? Selamat, selamat.
Berikutnya Dettline akan coba untuk membuat artikel
gabungan antara artikel ini dengan artikel “Membuat Validasi Input Menggunakan Javascript”. Terimakasih atas kunjugan sobat.
Semoga artikel ini dapat membantu.
2 komentar