javascript,通过页面某字段值，用控制表格隐藏和显示
现有3个表格，ID=tr1，tr2，tr3。另有1个字段，选择值为：1,2,3如何达到效果，选择字段值为1，则显示表格tr1；字段值为2，则显示表格tr1，tr2；字段值...
现有3个表格，ID=tr1，tr2，tr3。另有1个字段，选择值为：1,2,3
如何达到效果，选择字段值为1，则显示表格tr1；字段值为2，则显示表格tr1，tr2；字段值为3，则显示表格tr1，tr2，tr3？ 展开
如何达到效果，选择字段值为1，则显示表格tr1；字段值为2，则显示表格tr1，tr2；字段值为3，则显示表格tr1，tr2，tr3？ 展开
展开全部
别忘了引用jquery.js!!!!!!
<html>
<title></title>
<head>
<style type="text/css">
.tb{width:100px;height:100px;border:1px solid;cellsapcing:0px;}
.tb tr{text-align:center;}
.tb tr td{border:1 solid;}
.td1{background:red;display:block;}
.td2{background:blue;display:block;}
.td3{background:green;display:block;}
#bt input{width:32px;font-size:12px;}
.hid{display:none;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function hid1(){
$("#tr2").addClass("hid");
$("#tr3").addClass("hid");
}
function hid3(){
var t2=$("#tr2").attr("class").split('');
if($.inArray("hid",t2)==-1){
$("#tr2").removeClass("hid");
$("#tr2").addClass("td2");
$("#tr3").removeClass("td3");
$("#tr3").addClass("hid");
}
}
function show12(){
var t3=$("#tr3").attr("class").split('');
if($.inArray("hid",t3)==-1){
$("#tr3").removeClass("hid");
$("#tr3").addClass("td3");
$("#tr2").removeClass("hid");
$("#tr2").addClass("td2");
}
}
</script>
</head>
<body>
<table class="tb">
<tr id="tr1" class="td1"><td>tr1</td></tr>
<tr id="tr2" class="td2"><td>tr2</td></tr>
<tr id="tr3" class="td3"><td>tr3</td></tr>
</table>
<div id="bt"><input type="button" value="1" onClick="hid1();"/><input type="button"
value="2" onClick="hid3()"/><input type="button" value="3" onClick="show12()"/></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title>TestA</title>
<script type="text/javascript">
function showData(val) {
var tb1=document.getElementById("tb1");
var tb2=document.getElementById("tb2");
var tb3=document.getElementById("tb3");
var tr1=document.getElementById("tr1");
var tr2=document.getElementById("tr2");
var tr3=document.getElementById("tr3");
tb1.style.display="none";
tb2.style.display="none";
tb3.style.display="none";
switch(val){
case 1:
alert(val);
tb1.style.display="";
break;
case 2:
tb1.style.display="";
tb2.style.display="";
break;
case 3:
tb1.style.display="";
tb2.style.display="";
tb2.style.display="";
break;
case 4:
tb1.style.display="";
tr1.style.display="";
tr2.style.display="none";
tr3.style.display="none";
break;
case 5:
tb1.style.display="";
tr1.style.display="";
tr2.style.display="";
tr3.style.display="none";
break;
case 6:
tb1.style.display="";
tr1.style.display="";
tr2.style.display="";
tr3.style.display="";
break;
}
}
</script>
</head>
<body>
<select onchange="showData(this.value);">
<option value="0"></option>
<option value="1">table1</option>
<option value="2">table12</option>
<option value="3">table123</option>
<option value="4">table1第一列</option>
<option value="5">table1第一二列</option>
<option value="6">table1第一二三列</option>
</select>
<table border="1" id="tb1" style="display:none;">
<tr id="tr1">
<td>A1111111111</td>
</tr>
<tr id="tr2">
<td>A222222222</td>
</tr>
<tr id="tr3">
<td>A333333333</td>
</tr>
</table>
<table border="1" id="tb2" style="display:none;">
<tr>
<td>B1111111111</td>
</tr>
<tr>
<td>B222222222</td>
</tr>
<tr>
<td>B333333333</td>
</tr>
</table>
<table border="1" id="tb3" style="display:none;">
<tr>
<td>C1111111111</td>
</tr>
<tr>
<td>C222222222</td>
</tr>
<tr>
<td>C333333333</td>
</tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
