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的列,布布扣,bubuko.com

Javascript根据select值隐藏table的列

上一篇:ASP.NET中XML转换为JSON,JSON转换为XML的方法


下一篇:针对flex Channel.Connect.Failed error NetConnection.Call.Failed 404