Javascript根据select值隐藏table的列

实例。。。

<html>
<head>
<title></title>
<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
   function ChangeColum (FieldObject){
       var selectIndex = FieldObject.selectedIndex;    //dropdownlist选中的项数
       var strStyle = FieldObject.options[selectIndex].text;//取出对应的值
       var oTable = document.getElementById("tb1");
       if(strStyle=="ONE"){
           setHiddenCol(oTable,"td1");
       }else if(strStyle=="TWO"){
           setHiddenCol(oTable,"td2");
       }else if(strStyle=="THREE"){
           setHiddenCol(oTable,"td3");
       }else if(strStyle=="FOUR"){
           setHiddenCol(oTable,"td4");
       }
   }
   function setHiddenCol(oTable,colum){
       var str = oTable.getElementsByTagName("td");//取得列
       for(var i=0;i<str.length;i++){
           if(str[i].className == colum){//如果列的classname等于传过来的列名
               str[i].style.display="none";//隐藏
           }else{
               str[i].style.display="";//其余东东显示
           }
       }
   }
</script>
</head>
<body>
   <div>
       <select id="iSelected" onchange="ChangeColum(this)">
       <option value="0" selected="selected">--选择--</option>
       <option value="1">ONE</option>
       <option value="2">TWO</option>
       <option value="3">THREE</option>
       <option value="4">FOUR</option>
       </select>
   </div>
   <table id="tb1">
       <tr>
           <td class="td1" style="width:20%">AA</td>
           <td class="td2" style="width:5%">BB</td>
           <td class="td3" style="width:25%">CC</td>
           <td class="td4" style="width:50%">DD</td>
       </tr>
       <tr>
           <td class="td1" style="width:20%">11</td>
           <td class="td2" style="width:5%">22</td>
           <td class="td3" style="width:25%">33</td>
           <td class="td4" style="width:50%">44</td>
       </tr>
       <tr>
           <td class="td1" style="width:20%">11</td>
           <td class="td2" style="width:5%">22</td>
           <td class="td3" style="width:25%">33</td>
           <td class="td4" style="width:50%">44</td>
       </tr>
        <tr>
           <td class="td1" style="width:20%">11</td>
           <td class="td2" style="width:5%">22</td>
           <td class="td3" style="width:25%">33</td>
           <td class="td4" style="width:50%">44</td>
       </tr>
   </table>
</body>
</html>


你可能感兴趣的:(Javascript根据select值隐藏table的列)