div的显示与隐藏

优化彩票投注数据显示

最新推荐文章于 2024-10-28 17:03:21 发布

原创最新推荐文章于 2024-10-28 17:03:21 发布 · 157 阅读

1 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个小功能的实现过程，即优化彩票投注数据显示的方式。通过使用JavaScript动态切换两个div元素来展示投注的概要信息和详细内容，解决了投注详情撑开表格的问题。

今天做个小功能(2009-3-6)：
将取得的数据显示在一jsp页面中，这两条记录是彩票投注的数据。
显示问题："方案内容"可能包含多注，当前的页面中显示出来会将表格撑开成多行显示，视觉效果不太好。

解决办法：
在当前页面中添加一个div，用来显示"点击查看"应该看到的用户的投注。
1.首次打开该页面，显示betsDetail(概括信息内容)，隐藏betsContent(投注详情)
2.点击“点击查看”,隐藏betsDetail，显示betsContent

见如下代码：

    <script>   
     function viewDetail(){  
      var betsDetailObj = document.getElementById("betsDetail");  
      betsDetailObj.style.display = "none";  
        
      var contentValue = document.getElementById("content").value;  
      document.getElementById("contentParam").innerHTML = contentValue;  
          
      var betsContentObj = document.getElementById("betsContent");  
      betsContentObj.style.display = "";  
      betsContentObj.className = "hover";  
     }  
       
    </script>  
      
      
    <div id="betsDetail" class="hover" style="">  
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D5EDFD" class="fontBlue">  
      <tr>  
        <td height="30" colspan="13" align="left" background="../Image/bg_table.jpg" bgcolor="#CBE9F9">　查询投注记录列表</td>  
      </tr>  
      <tr>  
        <td height="25" bgcolor="#DDEEF9">序号</td>  
        <td width="15%" height="25" bgcolor="#DDEEF9">投注方案ID</td>  
        <td width="10%" bgcolor="#DDEEF9">SLT编号</td>  
        <td width="10%" bgcolor="#DDEEF9">购买彩种</td>  
        <td width="10%" bgcolor="#DDEEF9">投注时间</td>  
        <td width="5%" bgcolor="#DDEEF9">购买方式</td>  
        <td width="5%" bgcolor="#DDEEF9">玩法</td>  
        <td width="20%" bgcolor="#DDEEF9">方案内容 </td>  
        <td width="5%" bgcolor="#DDEEF9">投注注数</td>  
        <td width="10%" bgcolor="#DDEEF9">投注金额</td>  
        <td width="5%" bgcolor="#DDEEF9">处理状态</td>  
        <td width="5%" bgcolor="#DDEEF9">中奖注数</td>  
        <td bgcolor="#DDEEF9">中奖金额</td>  
      </tr>   
       
    <tr>  
        <td width="5%" align="center" bgcolor="#FFFFFF">1</td>  
        <td bgcolor="#FFFFFF"></td>  
        <td align="center" bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF">  
         <a href="#" target="mainFrame" onclick="viewDetail()">点击查看</a>  
        </td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
        <td bgcolor="#FFFFFF"></td>  
      </tr>  
      
    </table>  
    </div>  
      
      
    <div id="betsContent" class="" style="display:none">  
     <table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D5EDFD" class="fontBlue">  
      <tr>  
         <td height="30" colspan="13" align="left" background="../Image/bg_table.jpg" bgcolor="#CBE9F9">投注内容列表:</td>  
       </tr>  
        
       <tr>  
         <td align="right" bgcolor="#EEF6FB" class="fontjuhuan">选号内容:</td>  
         <td colspan="5" bgcolor="#EEF6FB">  
          <div id="contentParam"></div>  
         </td>  
       </tr>  
      </table>  
    </div>

在调试的过程中，总是出现一个问题：点击"点击查询",页面上什么都不显示，调试js：
1.alert(document.getElementById("contentParam").innerHTML = contentValue;);
显示是正确的。

2.如果将两个div设置成都显示的话，betsContent正确显示，并且<div id="contentParam"></div>中也被添加了正确的数据。

经过数十次的调试修改才发现，原来是<div id="betsDetail" class="hover" style="">的截止符写成<div>了，调试工具用的dreamweaver8,没有任何错误提示，导致花费了太多的调试时间，真实气死人阿！！！

大家都在用什么好的html或相关的调试工具，推荐一下阿。