Question

我有一个固定的表格布局，宽度为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;  
     }



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>

谢谢， Karthik

Answer 1

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

外观：

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

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

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

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

由于白色空格，我不会在<tr></tr>内断行，因为它们被视为子节点。

固定表格布局在列隐藏时调整大小

1 个答案: