[分享] ASP 表格內容的動態顯示/隱藏

看板mud_sanc (Sanctuary - 聖殿)作者laechan (小太保)時間13年前 (2012/06/17 21:53)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串1/2 (看更多)

比方說，聖殿寫了個網頁可以觀看武防資料如下... ┌────┬───┬──┬───┐ │名稱　　│攻擊力│重量│價　格│ ├────┼───┼──┼───┤ │真實之劍│ 2800 │ 200│ 56000│ ├────┴───┴──┴───┤ │指定口袋道具卡片，月例大賽猜猜│ │拳的優勝獎品。　　　　　　　　│ ├────┬───┬──┬───┤ │天罰之杖│ 2400 │ 180│ 44000│ ├────┴───┴──┴───┤ │遇到想施予懲罰的人時，將此杖指│ │向空中，目前為止你與對方之中作│ │孽較多者，就會受到強烈的災禍。│ ├────┬───┬──┬───┤ . . 但是因為聖殿武防非常多，如果每一個武防都使用上面的方式做列表的話將會非常多行，這時候有個簡單的想法就是，平常讓它只顯示如下的畫面.. ┌────┬───┬──┬───┬─────┐ │名稱　　│攻擊力│重量│價　格│敘　　　述│ ├────┼───┼──┼───┼─────┤ │真實之劍│ 2800 │ 200│ 56000│顯示隱藏│ ├────┼───┼──┼───┼─────┤ │天罰之杖│ 2400 │ 180│ 44000│顯示隱藏│ ├────┴───┴──┴───┼─────┤ . . 其中顯示跟隱藏則是做成按鈕，比方在真實之劍那邊按一下顯示按鈕，就變成.. ┌────┬───┬──┬───┬─────┐ │名稱　　│攻擊力│重量│價　格│敘　　　述│ ├────┼───┼──┼───┼─────┤ │真實之劍│ 2800 │ 200│ 56000│顯示隱藏│ ├────┴───┴──┴───┴─────┤ │指定口袋道具卡片，月例大賽猜猜拳的優勝獎品│ <= 按下去後這欄出現 │。　　　　　　　　　　　　　　　　　　　　│ ├────┬───┬──┬───┬─────┤ │天罰之杖│ 2400 │ 180│ 44000│顯示隱藏│ ├────┴───┴──┴───┼─────┤ 這樣玩家在最初開啟網頁時看到的就是簡易列表，然後再依自己的需要去點開想看的武防敘述即可。它的做法就是.. 1.為每一行(表格的每一行為 <tr>)訂一個 id 2.為每一行配置兩個按鈕，一個顯示，一個隱藏 <% for i = 0 to j tmp = ob(i) ' 先顯示武防名字、重量、價格等那一行 str = str & "<tr><th>" & db(tmp & "_name") & ...." ' 然後配置兩個按鈕 str = str & "<th><input type=button value='顯示' onclick=""" str = str & "document.getElementById('tr" & i & "').style.display='block'"">" str = str & "<input type=button value='隱藏' onclick=""" str = str & "document.getElementById('tr" & i & "').style.display='none'"">" str = str & "</th></tr>" ' 然後先將下一列要顯示的東西預設為隱藏 str = str & "<tr id=tr" & i & ",style='display:none'>" str = str & "<th>" & db(tmp & "_long") & "</th></tr>" next %> 這樣玩家開啟網頁時，看到的就會是簡潔的列表，而且每一筆資料都有[顯示]跟[隱藏]兩個按鈕可以按。上面的關鍵點就是為每一個 tr 定義一個 tr[i] 的 ID ，再使用 document.getElementById 的語法，就可以取得你想要控制的 id 所指向的物件，則.. ┌─該屬性下控制其顯示或隱藏的子屬性 ↓ tr[i].style.display = block/none/.... 等值 ↑ └該物件的型態屬性這樣就可以做到動態控制。這是我今天學會的東西，學會這個代表我往後所做的程式網頁內容可以更具深度一些。也分享給各位。參考網頁點擊button後，隱藏tr這一行，如何實現？ http://www.lslnet.com/linux/f/docs1/i55/big5366810.htm 用 radio 來作 table 的顯示和隱藏- 藍色小舖 BlueShop http://www.blueshop.com.tw/board/show.asp?subcde=BRD20050620162122W2D& fumcde=FUM20041006152641OLG Laechan -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 122.117.11.103