javaScript和table生成可折疊的菜單
			
          
 			Posted on 2007-04-29 00:22 dodo.loveme 閱讀(1574) 評論(0)  編輯  收藏  
			
			


		
          
		
          先生成一個table。點擊<thead>部分的話，<tbody>會消失


          

          <table width="175" border="0" id="table1" cellspacing="2">
                        <thead>
                            <tr>
                                <th><acronym style="cursor: hand; " title="在此可以查詢本周具體的采購清單項目">采購管理</acronym></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="odd">－<a href="http://localhost:8080/Hotel/purchaseExamine.jsp" target="main">采購作業</a></td>
                            </tr>
                            <tr>
                                <td>－<a href="http://purchaseExamine.jsp" target="main">采購簽核作業</a></td>
                            </tr>
                            <tr>
                                <td class="odd">－采購單打印</td>
                            </tr>
                            <tr>
                                <td>－采購預計一覽表</td>
                            </tr>
                        </tbody>
          </table>
          <table width="175" border="0" id="table1">
                        <thead>
                            <tr>
                                <th><acronym style="cursor: hand; " title="在此可以查詢本周具體的采購清單項目">采購管理</acronym></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="odd">－采購作業</td>
                            </tr>
                            <tr>
                                <td>－采購簽核作業</td>
                            </tr>
                            <tr>
                                <td class="odd">－采購單打印</td>
                            </tr>
                            <tr>
                                <td>－采購預計一覽表</td>
                            </tr>
                        </tbody>
          </table>
          <table width="175" border="0" id="table1">
                        <thead>
                            <tr>
                                <th><acronym style="cursor: hand; " title="在此可以查詢本周具體的采購清單項目">采購管理</acronym></th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="odd">－采購作業</td>

                            </tr>
                            <tr>
                                <td>－采購簽核作業</td>

                            </tr>
                            <tr>
                                <td class="odd">－采購單打印</td>

                            </tr>
                            <tr>
                                <td>－采購預計一覽表</td>

                            </tr>
                        </tbody>
          </table>
          <table width="175" border="0" id="table2">
                        <thead>
                            <tr>
                                <th><acronym style="cursor: hand; " title="在此可以查詢本周具體的采購清單項目">采購管理</acronym></th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="odd">－采購作業</td>

                            </tr>
                            <tr>
                                <td>－采購簽核作業</td>

                            </tr>
                            <tr>
                                <td>－采購單打印</td>

                            </tr>
                            <tr>
                                <td>－采購預計一覽表</td>

                            </tr>
                        </tbody>
          </table>
          


          接下來是javaScript代碼

          

           function collapse(){
                 
             
                           var thead = document.getElementsByTagName("thead");
              
                        for(var i=0;i<thead.length;i++){
                  
              
                  thead[i].onclick          = function(){
                                var tbody = this.parentNode.getElementsByTagName("tbody");
          //thead的父節點是table
                      if(tbody[0].style.display =="")
                      tbody[          0].style.display="none";            
                                else
                      tbody[          0].style.display="";
                  }
                 }
                        var tbody = document.getElementsByTagName("tbody");
          //初始化，讓所有的tbody都關閉
              for(var i=0;i<tbody.length;i++){
                  
                  
                  tbody[i].style.display          ="none";
              
              }
              }

          window.onload           = collapse;
          

          

          
	
          


          
	    
    




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
	
          
	
	
	

          

    







          
        
	




主站蜘蛛池模板：
比如县|
延吉市|
遂昌县|
临桂县|
九江县|
凉城县|
临邑县|
扎赉特旗|
衡阳市|
瑞丽市|
轮台县|
崇左市|
三江|
苏州市|
文水县|
通化县|
武威市|
庆城县|
巴南区|
溆浦县|
大同县|
疏勒县|
梁山县|
原平市|
连州市|
双鸭山市|
德清县|
刚察县|
淮北市|
眉山市|
沙湾县|
泰顺县|
永川市|
本溪|
江都市|
哈尔滨市|
汶上县|
安丘市|
舞钢市|
汝州市|
广昌县|