menyembunyikan tabel dengan javascript


inilah pagi terakhir di tahun 2010.. saya tidak akan mempermainkan kata-kata kali ini. saya hanya akan mengajarkan sebuah kode tentang cara menyembunyikan tabel dari pilihan di drop down/select box dengan javascript, ekekekek.

appaaa? uchenk mengajarkan? emangnya dia bisa? emangnya dia pinter? emangnya dia dapat ranking 1 terus?? yah, walaupun begini-begini, walaupun saya tidak selalu ranking satu di sekolah, setidaknya saya selalu ranking satu di hati siswi-siswi di sekolah saya.

baru-baru ini saya berurusan dengan form html yang beberapa komponennya harus disembunyikan dan dimunculkan lagi dengan select box. jika kamu juga ingin mencoba, bisa lihat contohnya berikut ini. sekedar untuk iseng-iseng berhadiah.

pertama-tama, dan yang paling utama, lihatlah kode ini:

<form id="nama_form">
 <table width="199">
  <tr>
   <td>
    <select id="pilihan" size="1" onChange="nama_fungsi()">
     <option value="1" selected="selected">Tabel 1 & 2</option>
     <option value="2">Tabel 1</option>
     <option value="3">Tabel 2</option>
    </select>
   </td>
  </tr>
 </table>
 <table width="199" id="tabel_1" border=1 name="nama_tabel_1" >
  <tr>
   <td>Tabel 1</td>
  </tr>
  <tr>
   <td>Isi Tabel 1</td>
  </tr>
 </table>
 <table width="199" id="tabel_2" border=1 name="nama_tabel_2" >
  <tr>
   <td>Tabel 2</td>
  </tr>
  <tr>
   <td>Isi Tabel 2</td>
  </tr>
 </table>
</form>
<script type="text/javascript">
function nama_fungsi()
{
 var chosenoption=document.getElementById("pilihan").options[document.getElementById("pilihan").selectedIndex]
 if (chosenoption.value=="1"){
  document.getElementById("tabel_1").style.display = '';
  document.getElementById("tabel_2").style.display = '';
 }
 else if (chosenoption.value=="2"){
  document.getElementById("tabel_1").style.display = '';
  document.getElementById("tabel_2").style.display = 'none';
 }
 else {
  document.getElementById("tabel_1").style.display = 'none';
  document.getElementById("tabel_2").style.display = '';
 }
}
</script>

kode di atas akan menghasilkan sebuah form, dengan satu drop down/select box dan dua tabel. tabel-tabel tersebut bisa disembunyikan & dimunculkan kembali dengan mengubah-ubah pilihan di drop down/select box. kamu juga bisa coba menyembunyikan komponen selain tabel, selama komponen tersebut mempunyai id. ohya, tentu masih banyak cara lain untuk menyembunyikan dan memunculkan kembali suatu komponen di html. silakan kamu cari sendiri, dan nanti kasi tau saya. ekekekkk..

oke, karena hari ini tanggal 31 desember 2010, saya mengucapkan, selamat hari jumat, semoga akhir pekan kamu bermanfaat dan menyenangkan. sekian, terimakasih..

Advertisements

4 Responses

  1. pengennya sih ngasih komentar Cen, tapi apa ini.. kata2 apa ini..bahkan kalimat apa ini? satu baris belum habis….. pindah lagi ke barisan bawah … Di ulang-ulang… gak ngerti , capek deh ! … But..Oouh, I remember when d first time u studied at ITB… I think I ever wrote it for u… eventhogh I never know what is the words mean untill now… Good Luck !

  2. you must be mom, kok pake nama pa2?
    yeah.. you right mom, i was sick that time, but i hav to submit that task the next day.. and that task should be hand written.
    huks..
    thanks mom..

  3. terimakasih cukup membantu

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: