今天做个小功能(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" οnclick="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或相关的调试工具,推荐一下阿。