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


		
          
		
          先生成一個(gè)table。點(diǎn)擊<thead>部分的話，<tbody>會(huì)消失


          

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

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

                            </tr>
                            <tr>
                                <td>－采購簽核作業(yè)</td>

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

                            </tr>
                            <tr>
                                <td>－采購預(yù)計(jì)一覽表</td>

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

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

                            </tr>
                            <tr>
                                <td>－采購簽核作業(yè)</td>

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

                            </tr>
                            <tr>
                                <td>－采購預(yù)計(jì)一覽表</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的父節(jié)點(diǎn)是table
                      if(tbody[0].style.display =="")
                      tbody[          0].style.display="none";            
                                else
                      tbody[          0].style.display="";
                  }
                 }
                        var tbody = document.getElementsByTagName("tbody");
          //初始化，讓所有的tbody都關(guān)閉
              for(var i=0;i<tbody.length;i++){
                  
                  
                  tbody[i].style.display          ="none";
              
              }
              }

          window.onload           = collapse;
          

          

          
	
          


          
	    
    




          





          


          

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


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
	
          
	
	
	

          

    







          
        
	




主站蜘蛛池模板：
江源县|
大新县|
岗巴县|
山西省|
平泉县|
屏南县|
峨眉山市|
苍溪县|
鄂托克前旗|
大冶市|
昌江|
堆龙德庆县|
班戈县|
壶关县|
桓台县|
江川县|
宜兰县|
寿阳县|
双江|
广平县|
门源|
嘉黎县|
漯河市|
滁州市|
义乌市|
固安县|
砚山县|
文登市|
南皮县|
大英县|
二手房|
嵩明县|
灵宝市|
礼泉县|
肇东市|
弥渡县|
丹东市|
钟祥市|
甘泉县|
故城县|
巴林左旗|