作者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