Menyembunyikan kolom dari tabel menggunakan javascript

Jumat, 13 Mei 2011 · Posted in 

<html>
<head>
<script>
 
  function show_hide_column(col_no, do_show) {

    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';

    var tbl  = document.getElementById('id_tabel');
    var rows = tbl.getElementsByTagName('tr');

    for (var row=0; row<rows.length;row++) {
      var cels = rows[row].getElementsByTagName('td')
      cels[col_no].style.display=stl;
    }
  }

</script>

</head>
<body>

<table id='id_tabel' border=1>
  <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td><td>kolom 4</td></tr>
  <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td><td>kolom 4</td></tr>
  <tr><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td><td>kolom 4</td></tr>
  
</table>


<form>

  Enter column no: <input type='text' name=col_no>
  <br>             <input type='button' onClick='javascript:show_hide_column(col_no.value,  true);' value='tampil'>
                   <input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='sembunyi'>

</form>

</body>
</html>

3 Responses to “Menyembunyikan kolom dari tabel menggunakan javascript”

Diberdayakan oleh Blogger.