作者laechan (小太保)
看板mud_sanc
標題[分享] 表格內容的動態顯示/隱藏
時間Sun Jun 17 21:53:45 2012
比方說，聖殿寫了個網頁可以觀看武防資料如下...
┌────┬───┬──┬───┐
│名稱 │攻擊力│重量│價 格│
├────┼───┼──┼───┤
│真實之劍│ 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