`

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或相关的调试工具,推荐一下阿。

 

  • 大小: 8.2 KB
分享到:
评论

相关推荐

    Div显示与隐藏网页制作

    在"Div显示与隐藏网页制作"这个主题中,我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏,这对于创建交互式和响应式的网页至关重要。 在网页设计中,有时我们需要根据用户的行为或者特定条件来控制某些内容的...

    网页设计div的显示和隐藏

    ### 网页设计中的div显示与隐藏技术详解 在网页设计中,div元素作为最基本的容器之一,被广泛应用于布局、样式控制等多个方面。而如何有效地控制div元素的显示与隐藏,则是实现交互式设计的重要手段之一。本文将...

    控制Div显示和隐藏

    本程序在网页中设计了Div层的显示和隐藏,代码简单、实用。

    纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

    在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...

    隐藏与显示事件

    在IT行业中,隐藏与显示效果是一种常见的用户界面(UI)设计技术,主要用于优化用户体验和管理屏幕空间。在标题“隐藏与显示事件”中,我们关注的是如何通过编程控制UI元素的可见性,使得用户能够根据需求查看或隐藏...

    div显示隐藏效果

    总之,`div`的显示隐藏效果是前端开发中的基本技巧,它涉及到HTML、CSS和JavaScript的综合运用。掌握这一技能可以帮助开发者更好地控制网页的交互性和用户体验。通过不断学习和实践,你可以创造出更多富有创意的显示...

    jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

    总之,通过本文对jQuery中toggle方法实现点击触发DIV显示与隐藏问题的分析,我们可以学习到如何利用jQuery简化DOM操作和事件处理,以及如何在实际开发中处理常见的显示与隐藏问题。通过理解文档类型声明的重要性,...

    onclick事件实现div的隐藏和显示

    总之,掌握 `onclick` 事件及其在控制 `div` 显示隐藏中的应用是前端开发的基础,这有助于创建更具交互性的网页。同时,熟悉源码阅读和开发者工具的使用,能帮助开发者更好地理解代码逻辑,定位并解决问题。

    ASPnet(C#)中的DIV的显示隐藏问题

    &lt;title&gt;ASP.NET显示隐藏示例 function toggleDiv() { var div1 = document.getElementById('&lt;%= div1.ClientID %&gt;'); var div2 = document.getElementById('&lt;%= div2.ClientID %&gt;'); if (div1.style.display...

    JS实现各种动态显示隐藏div效果

    总结起来,JS结合CSS提供了丰富的可能性来实现div的动态显示隐藏效果。通过巧妙地控制时间和动画曲线,可以创建出各种吸引人的用户界面。实践中,还可以结合CSS3的`animation`属性和JS的事件监听来实现更复杂的交互...

    div左侧显示和隐藏

    div实现iframe的框架左侧隐藏与显示实例;代码非常简单;分享给大家

    Div显示隐藏

    在本主题中,我们将深入探讨如何利用 `div` 实现“鼠标放到文字上显示隐藏的 `div`”这一交互效果。 首先,我们需要创建两个 `div` 元素,一个用于显示文字,另一个用于隐藏的内容。假设我们有以下 HTML 结构: ``...

    JavaScript 动态隐藏、显示DIV 页面刷新后也不会改变隐藏状态

    使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到,当页面刷新时,也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...

    ajax控制div窗口显示和隐藏

    三、Ajax控制Div显示 要使用Ajax来控制div的显示,首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后,根据返回的数据决定是否显示或隐藏特定的div。例如,服务器可能返回一个JSON对象,其中包含一个...

    Vue切换div显示隐藏,多选,单选代码解析

    切换div显示隐藏 1)单个item下的部分dom结构,显示或隐藏切换,不会修改其它同级dom的显示/隐藏 template dom结构 &lt;div class=list-item v-for=(list,index)&gt; &lt;p class=job-name&gt;{{list.jobName}} (index)&gt;...

    点击按钮(a标签)隐藏显示div内容,切换div内容

    点击按钮(a标签)隐藏显示div内容,切换div内容

    js实现div层的显示与隐藏

    使用js代码实现div层的显示与隐藏,主要是radio的属性。

    精美的div隐藏与显示

    在这个“精美的div隐藏与显示”的主题中,我们将探讨如何使用JavaScript(特别是jQuery库)来实现`div`元素的动态效果,如滑动、淡入淡出以及隐藏和显示。 首先,让我们关注jQuery库。jQuery是一个轻量级的...

    js实现多div的显示和隐藏

    在网页设计中,我们经常需要控制多个div(文档对象模型中的一个元素)的显示和隐藏,以实现诸如选项卡、轮播图等效果。本文将详细讨论如何使用JavaScript实现多div的显示和隐藏,以及如何创建简单的选项卡功能。 ...

Global site tag (gtag.js) - Google Analytics