实例。。。
<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>
