在javascript中如何隐藏一个表格
有两个表格，第一表正常显示，第二表格默认隐藏，第一个表格中有个下拉列表select,里面有9个option,当选中第一个option,第二张表保持隐藏状态，当选中后面8个...
有两个表格，第一表正常显示，第二表格默认隐藏，第一个表格中有个下拉列表select,里面有9个option,当选中第一个option,第二张表保持隐藏状态，当选中后面8个option,第二个表格显示。请问要怎么实现呀！！！请用JavaScript
展开
2个回答
展开全部
<html>
<head>
</head>
<body>
<table border="1" bgcolor="red">
<tr><td>第一下下拉不显示，选其他会选中表2
<select name="myselect" onChange="showOrHideTable2()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>第一个表格第二列</td>
</tr>
</table>
<table border="1" bgcolor="blue" style="display:none" id="table2" >
<tr><td>第二个表格第一列</td><td>第二个表格第二列</td></tr>
</table>
<script type="text/javascript">
function showOrHideTable2(){
var myselectValue = document.all.item("myselect").value;
if(myselectValue!="1"){
document.getElementById("table2").style.display="block";
}else{
document.getElementById("table2").style.display="none";
}
}
</script>
</body>
<html>
<head>
</head>
<body>
<table border="1" bgcolor="red">
<tr><td>第一下下拉不显示，选其他会选中表2
<select name="myselect" onChange="showOrHideTable2()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td>第一个表格第二列</td>
</tr>
</table>
<table border="1" bgcolor="blue" style="display:none" id="table2" >
<tr><td>第二个表格第一列</td><td>第二个表格第二列</td></tr>
</table>
<script type="text/javascript">
function showOrHideTable2(){
var myselectValue = document.all.item("myselect").value;
if(myselectValue!="1"){
document.getElementById("table2").style.display="block";
}else{
document.getElementById("table2").style.display="none";
}
}
</script>
</body>
<html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
function check()
{
n =0;
n = form1.bigId.selectedIndex;
var ss="smallId0";
for(i=0;i<2;i++)
{
<!--让所有下拉框消失-->
eval("form1.smallId0"+i+".style.display='none'");
<!--让选中下拉框出现-->
eval("form1.smallId0"+n+".style.display='block'");
}
}
</script>
<form name="form1">
<select name="bigId" onchange="check()">
<option value="1">地区</option>
<option value="2">火星</option>
</select>
<br/>
<select name="smallId00"style="DISPLAY: true">
<option value="1">地区1</option>
<option value="1">地区2</option>
<option value="1">地区3</option>
<option value="1">地区4</option>
<option value="1">地区5</option>
</select>
<select name="smallId01"style="DISPLAY: none">
<option value="1">火星1</option>
<option value="1">火星2</option>
<option value="1">火星3</option>
<option value="1">火星4</option>
<option value="1">火星5</option>
</select>
</form>
如果你是用jsp <%=%> 做的话 我这有现成的例子 以前项目做的
<form name="form1" action="servlet/DeletSmallType" method="post">
<table>
<tr><td>
删除分类别
</td></tr>
<script type="text/javascript">
function check()
{
n =0;
n = form1.bigId.selectedIndex;
var ss="smallId0";
for(i=0;i<<%=list.size()%>;i++)
{
eval("form1.smallId0"+i+".style.display='none'");
eval("form1.smallId0"+n+".style.display='block'");
document.form1.hiddenField.value=ss+n;
}
}
</script><tr><td>
<select name="bigId" onchange="check()">
<%for(int i=0;i<list.size();i++){ %>
<option value="<%=list.get(i).getId() %>"><%=list.get(i).getBigName() %></option>
<%} %>
</select>
</td><td>
<%for(int ii=0;ii<list.size();ii++){%>
<select name="smallId0<%=ii%>"style="DISPLAY: none">
<%for(int j=0;j<(gm.getSmallType(list.get(ii).getId())).size();j++){%>
<option value="<%=(gm.getSmallType(list.get(ii).getId())).get(j).getId()%>"><%=(gm.getSmallType(list.get(ii).getId())).get(j).getSmallName()%></option>
<%} %>
</select>
<%}%>
</td>
<td>
<input type="hidden" name="hiddenField" value="smallId00" />
<input type="submit"value="提交">
</td></tr>
</table>
</form>
function check()
{
n =0;
n = form1.bigId.selectedIndex;
var ss="smallId0";
for(i=0;i<2;i++)
{
<!--让所有下拉框消失-->
eval("form1.smallId0"+i+".style.display='none'");
<!--让选中下拉框出现-->
eval("form1.smallId0"+n+".style.display='block'");
}
}
</script>
<form name="form1">
<select name="bigId" onchange="check()">
<option value="1">地区</option>
<option value="2">火星</option>
</select>
<br/>
<select name="smallId00"style="DISPLAY: true">
<option value="1">地区1</option>
<option value="1">地区2</option>
<option value="1">地区3</option>
<option value="1">地区4</option>
<option value="1">地区5</option>
</select>
<select name="smallId01"style="DISPLAY: none">
<option value="1">火星1</option>
<option value="1">火星2</option>
<option value="1">火星3</option>
<option value="1">火星4</option>
<option value="1">火星5</option>
</select>
</form>
如果你是用jsp <%=%> 做的话 我这有现成的例子 以前项目做的
<form name="form1" action="servlet/DeletSmallType" method="post">
<table>
<tr><td>
删除分类别
</td></tr>
<script type="text/javascript">
function check()
{
n =0;
n = form1.bigId.selectedIndex;
var ss="smallId0";
for(i=0;i<<%=list.size()%>;i++)
{
eval("form1.smallId0"+i+".style.display='none'");
eval("form1.smallId0"+n+".style.display='block'");
document.form1.hiddenField.value=ss+n;
}
}
</script><tr><td>
<select name="bigId" onchange="check()">
<%for(int i=0;i<list.size();i++){ %>
<option value="<%=list.get(i).getId() %>"><%=list.get(i).getBigName() %></option>
<%} %>
</select>
</td><td>
<%for(int ii=0;ii<list.size();ii++){%>
<select name="smallId0<%=ii%>"style="DISPLAY: none">
<%for(int j=0;j<(gm.getSmallType(list.get(ii).getId())).size();j++){%>
<option value="<%=(gm.getSmallType(list.get(ii).getId())).get(j).getId()%>"><%=(gm.getSmallType(list.get(ii).getId())).get(j).getSmallName()%></option>
<%} %>
</select>
<%}%>
</td>
<td>
<input type="hidden" name="hiddenField" value="smallId00" />
<input type="submit"value="提交">
</td></tr>
</table>
</form>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
