當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

可以分級的表格隱藏的JS代碼如何寫

可以分級的表格隱藏的JS代碼如何寫

更新時間:2023-06-20 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

可以分級的表格隱藏的JS代碼

【實例描述】

分級的表格隱藏是指當用戶單擊第一行時,第一行后面的行都會隱藏;單擊第二行時,則第二行下面的所有行會隱藏,依次類推。

【實例代碼】

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>New Page-本站(www.xue51.com)</title> <Script Language="javascript"> function trClick(c){ if(c==0){                                // 如果選擇的是第一行  if (document.all("a1").style.display=="") //如果第二行是顯示的   document.all("a1").style.display="none"; //讓第二行不顯示  else    document.all("a1").style.display="";   //讓第二行顯示  if (document.all("a1").style.display=="none") //如果第二行不顯示   document.all("a11").style.display="none";   //第三行也不顯示  else    document.all("a11").style.display="";       //第三行顯示 } else if(c==1){      if (document.all("a11").style.display=="")   //如果第三行顯示       document.all("a11").style.display="none";   //第三行不顯示      else        document.all("a11").style.display="";        //第三行顯示      if (document.all("a111").style.display=="")  //如果第四行顯示       document.all("a111").style.display="none";  //第四行不顯示      else        document.all("a111").style.display="";  //第四行顯示     } else if(c==2){      if (document.all("a111").style.display=="")  //如果第四行顯示       document.all("a111").style.display="none";  //第四行不顯示      else        document.all("a111").style.display="";  //第四行顯示     } } --> </Script> </head>

<body> <div align="center">  <center>  <table border="0" cellpadding="0" cellspacing="0" width="200">   <tr id="a0" onclick="trClick(0)">    <td height="24" bgcolor="#0000FF"><b> <font color="#FFFFFF">第一行</font></b></td>   </tr>   <tr id="a1" onclick="trClick(1)">    <td height="24" bgcolor="#FF0000"> <font color="#FFFFFF">第二行</font></td>   </tr>   <tr id="a11" onclick="trClick(2)">    <td height="24" bgcolor="#FFFF00">第三行</td>   </tr>    <tr id="a111">    <td height="24" bgcolor="#0eeee0">第四行</td>   </tr>  </table>  </center> </div> </body> </html>

 

【運行效果】

                                                          表格的原始效果

運行效果

                                                         單擊第二行后的效果

運行效果

【難點剖析】

本例的重點其實是一系列的“if...else if”語句。當單擊第一行時,判斷第一行后面所有行的顯示狀態,如果行顯示屬性“display”為空,則設置為"none",表示不顯示該行,否則顯示該行。通過“else if'’語句判斷用戶選擇的是第幾行,“c”的值通過單擊事件中的參數傳遞。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性,你可以點擊:可以分級的表格隱藏 進行本實例源碼下載 


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品