模块切换与表格展示-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_3260/article/details/82086866

本文展示了如何通过JavaScript实现模块间的切换，并结合HTML和CSS创建动态表格。用户可以通过选择不同的选项来查看不同模块的数据，实现信息的灵活展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a href="javascript:changeBody(1)">模块A</a> 
<a href="javascript:changeBody(2)">模块B</a> 
<a href="javascript:changeBody(3)">模块C</a> 

<div style="display: none" id="iDBody1"></div> 
<div style="display: none" id="iDBody2"></div> 
<div style="display: none" id="iDBody3"></div>

function changeBody(index){
  switch(index){
    case 1:{
      document.getElementById('iDBody1').style.display = "";
      document.getElementById('iDBody2').style.display = "none";
      document.getElementById('iDBody3').style.display = "none";
    }
    case 2:{
      document.getElementById('iDBody1').style.display = "none";
      document.getElementById('iDBody2').style.display = "";
      document.getElementById('iDBody3').style.display = "none";
    }
    case 3:{
      document.getElementById('iDBody1').style.display = "none";
      document.getElementById('iDBody2').style.display = "none";
      document.getElementById('iDBody3').style.display = "";
    }
  }
}

--------------------------------------------------------------------------------------------

我的应用

function changeTable(str)  
	    {  
	   		var index = parseInt(str);
	    	switch(index){
		    case 0:{
		      document.getElementById('type1div').style.display = "";
		      document.getElementById('type2div').style.display = "none";
		      break;
		    }
		    case 1:{
		      document.getElementById('type2div').style.display = "";
		      document.getElementById('type1div').style.display = "none";
		      break;
		    }
		    default:{
		      document.getElementById('type1div').style.display = "";
		      document.getElementById('type2div').style.display = "none";
		      break;
		    }
		  }

          <table class="table_back" style="width:60%;">
            <tr>
            	<td>&nbsp;&nbsp;
            		 <select name="type" id="type" onchange="changeTable(this.options[this.options.selectedIndex].value)">
     				<%String[] types = {"机动车保有量信息","路内停车位信息"};%>
     					<option value="-请选择信息种类-" selected>-请选择信息种类-</option>
     				<% 
     				for(int i=0;i<types.length; i++){
     					String type = types[i];
     				%>
     					<option value="<%out.print(i); %>" ><%out.print(type); %></option>
     				<%
     				}
     				%>	
				     </select>&nbsp;信息种类
            	</td>
            	<td>&nbsp;&nbsp;
            		 <select name="year" id="year">
     				<%String[] years = {"2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021"};
     				request.setAttribute("years",years);
     				%>	
     					<option value="-请选择年份-" selected>-请选择年份-</option>
     					<c:forEach var="year" items="${years}">
				      		<option value="${year }" >${year }</option>
				     	</c:forEach>
				     </select>&nbsp;年 
            	</td>
            	<td>&nbsp;&nbsp;
            		 <select name="month" id="month">
     				<%String[] months = {"01","02","03","04","05","06","07","08","09","10","11","12"};
     				request.setAttribute("months",months);
     				%>
     					<option value="-请选择月份-" selected>-请选择月份-</option>
     					<c:forEach var="month" items="${months}">
				      		<option value="${month }" >${month }</option>
				     	</c:forEach>
				     </select>&nbsp;月 
            	</td>
            </tr>
          </table>
         	<img src="images/sjsc.gif" width="80" height="21" border="0" onClick="MM_openBrWindow()"/>&nbsp;
          	<a href='exportExcel.action' >
   				<img src="images/sjxz.gif" width="80" height="21" border="0">
   			</a>
         </fieldset>
      </form>
      <div id="type1div">
      	<table class="table_back2" id="typet1" style="margin-top:20px;" border="1">
	          <tr>
	            <th>统计区县${request.type}</th>
	            <th>车辆类型</th>
	            <th>当月个区县机动车总数量</th>
	            <th>当月个区县新增车辆数量</th>
	            <th>当月各区县报废车辆数量</th>
	            <th>当月各区县转出车辆数量</th>
	            <th>统计时间</th>
	            <th>审核</th>
	          </tr>
	          <tr>
	            <td>&nbsp;</td>
	            <td>&nbsp;</td>
	            <td>&nbsp;</td>
	            <td>&nbsp;</td>
	            <td>&nbsp;</td>
	            <td>&nbsp;</td>
	            <td>&nbsp;</td>
	            <td>&nbsp;</td>
	          </tr>
	    	</table>
      </div>

JS控制DIV隐藏显示