求助:如何用js实现动态显示和隐藏列的功能?

页面如下:
  
  商品    单价    规格    单位    类别
   aa     1.00             只    面包类
   bb     1.50                   面包类
   cc     1.00             只    面包类
表的每列上有一个checkbox,选择时只需要勾上checkbox就可以了在页面上我选择"单价"和"规格",点击"过滤"按钮,页面上只显示商品的单价和规格两列,"过滤"按钮变为"恢复",点击"恢复",页面恢复到以前的整表

解决方案 »

  1.   

    function hide(tbl_id,n,stl){

      var tbl = document.getElementById(tbl_id);
      for(var i=0;i<tbl.rows.length;i++){
        tbl.rows[i].cells[n].style.display = stl;  
      }
    }hide('tb',0,'none');
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <script language="javascript">
    function filterOnclick()
    {
    if(filter.value == "filter")
    {
    filter.value = "recover";
    for(i=0; i<5;i++)
    {
    if(Checkbox1[i].checked == false)
    {
    for(j=1;j<Table1.rows.length;j++)
    {
    Table1.rows(j).cells(i).style.display='none';
    }
    }

    }
    }
    else if(filter.value == "recover")
    {
    filter.value = "filter";
    for(i=0; i<5;i++)
    {
    Checkbox1[i].checked = false;
    for(j=1;j<Table1.rows.length;j++)
    {
    Table1.rows(j).cells(i).style.display='block';
    }
    } }
    }  </script>
     </HEAD>
     <BODY>
      <P>
    <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
    <TR>
    <TD width="20%"><INPUT id="Checkbox1" type="checkbox" name="Checkbox1"></TD>
    <TD width="20%"><INPUT id="Checkbox2" type="checkbox" name="Checkbox1"></TD>
    <TD width="20%"><INPUT id="Checkbox3" type="checkbox" name="Checkbox1"></TD>
    <TD width="20%"><INPUT id="Checkbox4" type="checkbox" name="Checkbox1"></TD>
    <TD width="20%"><INPUT id="Checkbox5" type="checkbox" name="Checkbox1"></TD>
    </TR>
    <TR>
    <TD width="20%"><FONT face="MS UI Gothic">商品</FONT></TD>
    <TD width="20%"><FONT face="MS UI Gothic">単価</FONT></TD>
    <TD width="20%"><FONT face="MS UI Gothic">規格</FONT></TD>
    <TD width="20%"><FONT face="MS UI Gothic">単位</FONT></TD>
    <TD width="20%"><FONT face="MS UI Gothic">類別</FONT></TD>
    </TR>
    <TR>
    <TD width="20%">aa</TD>
    <TD width="20%">1.00</TD>
    <TD width="20%">guige1</TD>
    <TD width="20%">個</TD>
    <TD width="20%">食品</TD>
    </TR>
    <TR>
    <TD width="20%">bb</TD>
    <TD width="20%">1.50</TD>
    <TD width="20%">guige2</TD>
    <TD width="20%">台</TD>
    <TD width="20%">果物</TD>
    </TR>
    <TR>
    <TD width="20%">cc</TD>
    <TD width="20%">1.00</TD>
    <TD width="20%">guige3</TD>
    <TD width="20%">人</TD>
    <TD width="20%">野菜</TD>
    </TR>
    </TABLE>
    </P>
    <INPUT id="filter" type="button" value="filter" name="Button1" onclick="filterOnclick()">
     </BODY>
    </HTML>
    看了要加分阿！！
      

  3.   

    楼上的for(j=1;j<Table1.rows.length;j++) 
    应该改为:for(j=0;j<Table1.rows.length;j++)
      

  4.   

    Table1.rows(j).cells(i).style.display='none';