Javascript 修复了隐藏列时调整表布局的问题

我有一个固定的表格布局，宽度为425px。这是一张有200行的桌子。当用户取消选中指定列的复选框时，该列将隐藏。当该列被隐藏时，表中隐藏列上的空间将保留，另一列的宽度将调整大小。 有人能告诉我怎么解决吗

  <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;  
     }

var showMode='表格单元格'；
如果（document.all）showMode='block'；
函数切换Vis（btn）{
btn=文档.表单['tcol'].元素[btn]；
cells=document.getElementsByName（'t'+btn.name）；
模式=btn.checked？显示模式：“无”；
对于（j=0；j

.sortable{宽度：425px；边框：2px实心#900；边框折叠：折叠；表格布局：固定}

.sortable th{文本对齐：左；边框：1px实心#fff}

.sortable thead th.sub0{文本对齐：居中；颜色：#fff；字体大小：115%；背景：#88b8db repeat-x 0-1400px；填充：2px}

.sortable tbody th.sub0{文本对齐：居中；字体大小：90%；颜色：1000；背景：重复-x 0-100px；填充：5px}

.sortable tbody th.sub1{换行：断开单词；文本对齐：左；字体大小：90%；颜色：000；背景：efefef repeat-x 0-100px；填充：6px}















ID

文件名

路径














显示列

Id

文件名

路径




谢谢，
Karthik
cells=document.getElementsByName（'t'+btn.name）

看：

ID
文件名
路径

你有id没有名字

无论如何，它不会做你想做的事

编辑

这对我很有用：

<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>


表{宽度：425；背景色：#eee；}
td，th{背景色：#ddd}
功能切换（btn）
{
var col=btn.name.substring（3）；
var tr=document.getElementsByTagName（“tr”）；
如果（btn.checked）
{
对于（变量i=0；i
显示列
身份证件
文件名
路径

我不会因为空格而打断
内部的行，因为它们被算作子节点。
您希望得到什么样的结果？根据新的可用总宽度重新调整所有列的大小？谢谢，因为表有边框，我需要去掉空格。相反，我可以让最后一列调整布局的剩余大小。我不确定是否要实现同样的功能。无论如何，我必须去掉桌子右侧的空间。谢谢，我忘了名字，看看我的代码。桌子宽425像素。如果没有显示任何列，请用rest填充空白。谢谢，代码可以正常工作。让我尝试将示例代码扩展到大表宽度，扩展到1250px，包含11列和300行。
<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>

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

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

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

<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>