今天做个小功能(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或相关的调试工具,推荐一下阿。
相关推荐
在"Div显示与隐藏网页制作"这个主题中,我们将探讨如何利用`Div`实现网页元素的动态显示和隐藏,这对于创建交互式和响应式的网页至关重要。 在网页设计中,有时我们需要根据用户的行为或者特定条件来控制某些内容的...
### 网页设计中的div显示与隐藏技术详解 在网页设计中,div元素作为最基本的容器之一,被广泛应用于布局、样式控制等多个方面。而如何有效地控制div元素的显示与隐藏,则是实现交互式设计的重要手段之一。本文将...
本程序在网页中设计了Div层的显示和隐藏,代码简单、实用。
在这个特定的主题中,“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果:当鼠标悬停在一个div上时,另一个关联的div会显示出来,同时其他无关的div保持隐藏状态。这种效果在创建导航...
在IT行业中,隐藏与显示效果是一种常见的用户界面(UI)设计技术,主要用于优化用户体验和管理屏幕空间。在标题“隐藏与显示事件”中,我们关注的是如何通过编程控制UI元素的可见性,使得用户能够根据需求查看或隐藏...
总之,`div`的显示隐藏效果是前端开发中的基本技巧,它涉及到HTML、CSS和JavaScript的综合运用。掌握这一技能可以帮助开发者更好地控制网页的交互性和用户体验。通过不断学习和实践,你可以创造出更多富有创意的显示...
总之,通过本文对jQuery中toggle方法实现点击触发DIV显示与隐藏问题的分析,我们可以学习到如何利用jQuery简化DOM操作和事件处理,以及如何在实际开发中处理常见的显示与隐藏问题。通过理解文档类型声明的重要性,...
总之,掌握 `onclick` 事件及其在控制 `div` 显示隐藏中的应用是前端开发的基础,这有助于创建更具交互性的网页。同时,熟悉源码阅读和开发者工具的使用,能帮助开发者更好地理解代码逻辑,定位并解决问题。
<title>ASP.NET显示隐藏示例 function toggleDiv() { var div1 = document.getElementById('<%= div1.ClientID %>'); var div2 = document.getElementById('<%= div2.ClientID %>'); if (div1.style.display...
总结起来,JS结合CSS提供了丰富的可能性来实现div的动态显示隐藏效果。通过巧妙地控制时间和动画曲线,可以创建出各种吸引人的用户界面。实践中,还可以结合CSS3的`animation`属性和JS的事件监听来实现更复杂的交互...
div实现iframe的框架左侧隐藏与显示实例;代码非常简单;分享给大家
在本主题中,我们将深入探讨如何利用 `div` 实现“鼠标放到文字上显示隐藏的 `div`”这一交互效果。 首先,我们需要创建两个 `div` 元素,一个用于显示文字,另一个用于隐藏的内容。假设我们有以下 HTML 结构: ``...
使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到,当页面刷新时,也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...
三、Ajax控制Div显示 要使用Ajax来控制div的显示,首先需要在JavaScript中创建一个Ajax请求。在接收到服务器响应后,根据返回的数据决定是否显示或隐藏特定的div。例如,服务器可能返回一个JSON对象,其中包含一个...
切换div显示隐藏 1)单个item下的部分dom结构,显示或隐藏切换,不会修改其它同级dom的显示/隐藏 template dom结构 <div class=list-item v-for=(list,index)> <p class=job-name>{{list.jobName}} (index)>...
点击按钮(a标签)隐藏显示div内容,切换div内容
使用js代码实现div层的显示与隐藏,主要是radio的属性。
在这个“精美的div隐藏与显示”的主题中,我们将探讨如何使用JavaScript(特别是jQuery库)来实现`div`元素的动态效果,如滑动、淡入淡出以及隐藏和显示。 首先,让我们关注jQuery库。jQuery是一个轻量级的...
在网页设计中,我们经常需要控制多个div(文档对象模型中的一个元素)的显示和隐藏,以实现诸如选项卡、轮播图等效果。本文将详细讨论如何使用JavaScript实现多div的显示和隐藏,以及如何创建简单的选项卡功能。 ...