请教:如何通过checkbox记表格的一纵向列隐藏与显示?

给同一列的td都赋予一个相同的属性，例如使用同样的name（在代码生成的时候也要加上），这样就可以通过getElementsByName得到所有这一列的td，然后就可以隐藏了。

解决方案 »

  1.   

    <body>
    <script language="JavaScript">
    <!--
    function check(o){
    var tb=document.getElementById("tb1")
    for(i=0;i<tb1.rows.length;i++){
    tb1.rows[i].cells[0].style.display=o.checked?'none':''
    }
    }
    //-->
    </script><table border="1" width="100%" id="tb1">
      <tr>
        <td width="50%">aaa</td>
        <td width="50%">nnn</td><td>111</td>
      </tr>
      <tr>
        <td  width="50%" >bbb</td>
        <td width="50%">mmm</td><td>222</td>
      </tr>
    <tr >
        <td width="50%" >ccc</td>
        <td width="50%">bbb</td><td>333</td>
      </tr>
    </table>
    <p><input type="checkbox" name="C1" value="on" onclick="check(this)"></p></body>
      

  2.   

    <body>
    <script language="JavaScript">
    <!--
    function check(o){
    var tb=document.getElementById("tb1")
    for(i=0;i<tb1.rows.length;i++){
    tb1.rows[i].cells[0].style.display=o.checked?'none':''
    }
    }
    //-->
    </script><table border="1" width="100%" id="tb1">
      <tr>
        <td width="50%">aaa</td>
        <td width="50%">nnn</td><td>111</td>
      </tr>
      <tr>
        <td  width="50%" >bbb</td>
        <td width="50%">mmm</td><td>222</td>
      </tr>
    <tr >
        <td width="50%" >ccc</td>
        <td width="50%">bbb</td><td>333</td>
      </tr>
    </table>
    <p><input type="checkbox" name="C1" value="on" onclick="check(this)"></p></body>
      

  3.   

    <body>
    <script language="JavaScript">
    <!--
    function check(o){
    var tb=document.getElementById("tb1")
    for(i=0;i<tb1.rows.length;i++){
    tb1.rows[i].cells[0].style.display=o.checked?'none':''
    }
    }
    //-->
    </script><table border="1" width="100%" id="tb1">
      <tr>
        <td width="50%">aaa</td>
        <td width="50%">nnn</td><td>111</td>
      </tr>
      <tr>
        <td  width="50%" >bbb</td>
        <td width="50%">mmm</td><td>222</td>
      </tr>
    <tr >
        <td width="50%" >ccc</td>
        <td width="50%">bbb</td><td>333</td>
      </tr>
    </table>
    <p><input type="checkbox" name="C1" value="on" onclick="check(this)"></p></body>
      

  4.   

    为该列单元格式定义一个特定的样式.
    在运行时通过更改样式集合,添加和移去样式规则"display:none"来实现,这样就不需要实现循环
    <STYLE>
    BODY {background-color: #CFCFCF;}
    @import url("otherStyleSheet.css");
    </STYLE>
    <SCRIPT>
    window.onload=fnInit;
    function fnInit(){
       // Access a rule in the styleSheet, change backgroundColor to blue.
       var oStyleSheet=document.styleSheets[0];
       var oRule=oStyleSheet.rules[0];
       oRule.style.backgroundColor="#0000FF";
       // Add a rule for P elements to have yellow backgrounds.
       oStyleSheet.addRule("P","background-color: #FFFF00;");
       // Change and imported rule:
       oStyleSheet.imports[0].color="#000000";
    }
    </SCRIPT>