fixed table layout resize when column is hiding

Question

I have a fixed table layout with width being 425px. It is a table with 200 rows. When the user un-select the checkbox specifying the column, the column is hidden. When the column is hidden, the table is left with the space on the hidden column and the other column width is resized. Could some one point me on the fix?

  <script type="text/javascript">
   var showMode = 'table-cell';  
   if (document.all) showMode='block';  

     function toggleVis(btn) {  
         btn   = document.forms['tcol'].elements[btn];  
         cells = document.getElementsByName('t'+btn.name);  
         mode = btn.checked ? showMode : 'none';  
         for(j = 0; j < cells.length; j++)  
              cells[j].style.display = mode;  
     }   

Also, the html and css

   .sortable {width: 425px;border: 2px solid #900;border-collapse:collapse;table-layout: fixed}

 .sortable th {text-align:left;border: 1px solid #fff}

 .sortable thead th.sub0 {text-align: center;color:#fff;font-size:115%;background: #88b8db repeat-x 0 -1400px;padding: 2px}

 .sortable tbody th.sub0 {text-align: center;font-size:90%;color:#000;background: #efefef repeat-x 0 -100px;padding: 5px}

 .sortable tbody th.sub1 {word-wrap:break-word;text-align: left;font-size: 90%;color: #000;background: #efefef repeat-x 0 -100px;padding: 6px}

   <table class="sortable" id="table_id">

   <col width="45">

   <col width="180">

   <col width="200">

   <thead>

   <tr>

   <th class="sub0"  id="tcol1">ID

   <th class="sub0"  id="tcol2">File Name

   <th class="sub0"  id="tcol3">Path

  </tr>

  </thead>

  <tbody>

  </table>

  <br/>

  <form name="tcol" onsubmit="return false">

           Show Columns

  <input type=checkbox name="col1" onclick="toggleVis(this.name)" checked> Id

<input type=checkbox name="col2" onclick="toggleVis(this.name)" checked> File Name

 <input type=checkbox name="col3" onclick="toggleVis(this.name)" checked> Path

 </form>

Thanks, Karthik

Answer 1

cells = document.getElementsByName('t'+btn.name)

look:

<th class="sub0"  id="tcol1">ID

<th class="sub0"  id="tcol2">File Name

<th class="sub0"  id="tcol3">Path

You got id there not name

It won't do what you want anyway.

EDIT

This works for me:

<style>
  table { width: 425; background-color: #eee;}
  td, th { background-color: #ddd} 
</style> 

<script type="text/javascript">

function toggleVis(btn)
{
  var col = btn.name.substring(3);
  var tr = document.getElementsByTagName ( "tr" );
  if ( btn.checked )
  {
    for ( var i=0; i < tr.length; i ++)
    {
      tr[i].childNodes[col-1].style.display = "table-cell";
    }
  }
  else
  {   
    for ( var i=0; i < tr.length; i ++)
    {
      tr[i].childNodes[col-1].style.display = "none";     
    }
  }
}   
</script>

<table> 
  <thead>
    <tr><th class="sub0"  id="tcol1">ID</th><th class="sub0"  id="tcol2">File Name</th><th class="sub0"  id="tcol3">Path</th></tr>
  </thead>
  <tbody>
    <tr><td>0</td><td>file_0</td><td>dir_0/file_0</td></tr>
    <tr><td>0</td><td>file_1</td><td>dir_1/file_1</td></tr>
    <tr><td>0</td><td>file_2</td><td>dir_2/file_2</td></tr>
    <tr><td>0</td><td>file_3</td><td>dir_3/file_3</td></tr>
  </tbody>
</table>

<br/>

<form name="tcol" onsubmit="return false">
  Show Columns
  <input type=checkbox name="col1" onclick="toggleVis(this)" checked="checked"/>Id
  <input type=checkbox name="col2" onclick="toggleVis(this)" checked="checked"/>File Name
  <input type=checkbox name="col3" onclick="toggleVis(this)" checked="checked"/>Path
</form>

I do not break lines inside <tr></tr> due to white-spaces, because they count as child nodes.