您的位置：首页 > Web前端 > JQuery

Javascript 与jquery实现dropdownlist（select）选中，table列隐藏

2014-03-06 17:56 375 查看

function setHiddenCol(oTable,colum)
{
var str=oTable.getElementsByTagName("td");//获取检索内容块
//alert(str.length);
for(var i=0;i<str.length;i++)//遍历内容块
{//alert(str[i].className);
if(str[i].className==colum)//判断类名是否为"colum"
{
str[i].style.display="none"; //满足条件内容隐藏显示
}else{
str[i].style.display=""
}
}
}
function CycleMD(oTable,colum){//遍历MD中的每一行
var DataGrid=document.getElementById("ZC0000000000084");//找到ID为ZC0000000000084
var DataColum=DataGrid.getElementsByTagName("TBODY");
var DataRows=DataColum[0].childNodes;//列
alert("MD:"+(DataRows.length-2));
//alert("oTable:"+oTable);
//alert("colum:"+colum);
for(var j=2;j<=DataRows.length;j++)//遍历行
{
if(j<10)  { j="0"+j; }
//var szCompAccount="ftcFormHolder_FpgForm_ZC0000000000084_ctl"+j+"_COLCTRL3";
setHiddenCol(oTable,colum);//模块化j调用隐藏列方法
alert(j);
}
}
function ChangeColums(FieldOject){
var selectindex=FieldOject.selectedIndex; //dropdownlist选中的项数
var StrStyle=FieldOject.options[selectindex].text;//对应项数的text
var oTable = document.getElementById("ftc_Table001");
//var oTable = $oTabl.get(0);
//var rows=document.getElementById('ftc_Table001').getElementsByTagName('tr');
//alert(rows.length);
//alert(oTable);
if(StrStyle=="新增"){
//alert("新增");
CycleMD(oTable,"colum2");//调用方法
}else if(StrStyle=="更改"){
//alert("更改");
//CycleMD(oTable,"");
}else if(StrStyle=="停用"){
//alert("停用");
//CycleMD(oTable,"colum3");
}
}

下面只需要对dropdownlist进行onchange绑定就ok.

jquery就更简单了。。。

<html>
<title></title>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="../jquery.js/jquery-1.8.0.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#iSelected").change(function(){
var count=$("#iSelected").find("option").length;
for(var i=0;i<count;i++)
{
//alert($("#iSelected").get(0).options[i].text);
if($("#iSelected").find("option:selected").text() == "qw") //调用select中的text值进行匹配，如果成功就执行下面的代码
{
$(".tb1 tr").each(function(){
$(this).find(".td1").hide();
$(this).find(".td2").show();
$(this).find(".td3").show();
});
}
if($("#iSelected").find("option:selected").text() == "we")
{
$(".tb1 tr").each(function(){
$(this).find(".td2").hide();
$(this).find(".td1").show();
$(this).find(".td3").show();
});
}
if($("#iSelected").find("option:selected").text() == "er")
{
$(".tb1 tr").each(function(){
$(this).find(".td3").hide();
$(this).find(".td1").show();
$(this).find(".td2").show();
});
}
if($("#iSelected").find("option:selected").text()=="--- 选项 ---")
{
$(".tb1 tr").each(function(){
$(this).find(".td3").show();
$(this).find(".td1").show();
$(this).find(".td2").show();
});
}
break;
}
});
});
/*
$(document).ready(function(){
$("#iSelected").change(function(){
$("#iSelected").val("2")
$(".tb1 tr").each(function(){
$(this).find(".td1").hide();
});
$(".tb1 tr").each(function(){
$(this).find(".td2").show();
});
$(".tb1 tr").each(function(){
$(this).find(".td3").show();
});
});
$("#iSelected").val(2).change(function(){
$(".tb1 tr").each(function(){
$(this).find(".td2").hide();
});
$(".tb1 tr").each(function(){
$(this).find(".td1").show();
});
$(".tb1 tr").each(function(){
$(this).find(".td3").show();
});
});
$("#iSelected").val(3).change(function(){
$(".tb1 tr").each(function(){
$(this).find(".td3").hide();
});
$(".tb1 tr").each(function(){
$(this).find(".td1").show();
});
$(".tb1 tr").each(function(){
$(this).find(".td2").show();
});
});
*/
//});
</script>
</head>
<body>
<div>
<div>
<select id="iSelected">
<option selected="selected" value="1">--- 选项 ---</option>
<option value="2">qw</option>
<option value="3">we</option>
<option value="4">er</option>
</select>
</div>
<table class="tb1">
<tr>
<td class="td1">AA</td>
<td>BB</td>
<td>CC</td>
<td class="td2">DD</td>
<td class="td3">EE</td>
</tr>
<tr>
<td class="td1">11</td>
<td>22</td>
<td>33</td>
<td class="td2">44</td>
<td class="td3">55</td>
</tr>
<tr>
<td class="td1">11</td>
<td>22</td>
<td>33</td>
<td class="td2">44</td>
<td class="td3">55</td>
</tr>
<tr>
<td class="td1">11</td>
<td>22</td>
<td>33</td>
<td class="td2">44</td>
<td class="td3">55</td>
</tr>
<tr>
<td class="td1">11</td>
<td>22</td>
<td>33</td>
<td class="td2">44</td>
<td class="td3">55</td>
</tr>
</table>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript table 列 jquery

相关文章推荐

新的分享

章节导航