首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > J2EE开发 >

在jsp页面中的某一个table中,在某一列的每个td上,鼠标放在每个td上,都会弹出一个对话框,鼠标移开对话框消失,小弟我实现了,但是还是有一些有关问题

2013-08-01 
在jsp页面中的某一个table中,在某一列的每个td上,鼠标放在每个td上,都会弹出一个对话框,鼠标移开对话框消

在jsp页面中的某一个table中,在某一列的每个td上,鼠标放在每个td上,都会弹出一个对话框,鼠标移开对话框消失,我实现了,但是还是有一些问题。
本帖最后由 Henry_YQH 于 2013-07-24 18:22:50 编辑 我先把我的代码贴出来,然后说一下问题!

这是jsp页面的那一列
<table class="table-css">
<s:if test="data==null || data.isEmpty()">
<tr class="list-row-even">
<td style="width:1070px">There is not data what you wanted!</td>
</tr>
</s:if>
<s:else>
<s:iterator value="data" id="date1" status="st">
<s:if test="#st.index%2==0">
<tr class="list-row-even">
<td style="width:130px"><s:property value="date" /></td>
<td style="width:150px"><s:property value="time" /></td>
<td style="width:88px"><s:property value="userip" /></td>
<td style="width:120px"><s:property value="servclass" /></td>
<td style="width:64px"><s:property value="serverip" /></td>
<td style="width:90px"><s:property value="gotoclass" /></td>
<td  id="text1Id" style="width:195px" onmouseover="showDiv(this)" onmouseout="hideDiv(this)">更多字段
<div class="hideDiv">
    <table class="hideTable">
    <tr ><td> test1=<s:property value="test1" /> </td></tr>
    <tr ><td> test2=<s:property value="test2" /> </td></tr>
    <tr ><td> test3=<s:property value="test3" /> </td></tr>
    <tr ><td> test4=<s:property value="test4" /> </td></tr>
    <tr ><td> test5=<s:property value="test5" /> </td></tr>
    </table>
    </div></td>
<td></td>
</tr>
</s:if>
<s:else>
<tr class="list-row-odd">
<td style="width:130px"><s:property value="date" /></td>
<td style="width:150px"><s:property value="time" /></td>
<td style="width:88px"><s:property value="userip" /></td>
<td style="width:120px"><s:property value="servclass" /></td>


<td style="width:64px"><s:property value="serverip" /></td>
<td style="width:90px"><s:property value="gotoclass" /></td>
<td  id="text1Id" style="width:195px" onmouseover="showDiv(this)" onmouseout="hideDiv(this)">更多字段
<div alt="在jsp页面中的某一个table中,在某一列的每个td上,鼠标放在每个td上,都会弹出一个对话框,鼠标移开对话框消失,小弟我实现了,但是还是有一些有关问题" />

2.在火狐浏览器下,当弹出窗出现的时候,鼠标可以自己的在弹出窗里面移动,并且不会促发,下一个td鼠标事件。
但是在ie和谷歌浏览器下,鼠标是不能在弹出窗中移动的,每当移到下一个td所在的位置,会促发td鼠标事件,并且弹出窗的位置也会随之变化。


[解决办法]

引用:
我先把我的代码贴出来,然后说一下问题!
这是jsp页面的那一列
<table class="table-css">
<s:if test="data==null 
[解决办法]
 data.isEmpty()">
<tr class="list-row-even">
<td style="width:1070px">There is not data what you wanted!</td>
</tr>
</s:if>
<s:else>
<s:iterator value="data" id="date1" status="st">
<s:if test="#st.index%2==0">
<tr class="list-row-even">
<td style="width:130px"><s:property value="date" /></td>
<td style="width:150px"><s:property value="time" /></td>
<td style="width:88px"><s:property value="userip" /></td>
<td style="width:120px"><s:property value="servclass" /></td>
<td style="width:64px"><s:property value="serverip" /></td>
<td style="width:90px"><s:property value="gotoclass" /></td>
<td  id="text1Id" style="width:195px" onmouseover="showDiv(this)" onmouseout="hideDiv(this)">更多字段
<div class="hideDiv">
    <table class="hideTable">
    <tr ><td> test1=<s:property value="test1" /> </td></tr>
    <tr ><td> test2=<s:property value="test2" /> </td></tr>
    <tr ><td> test3=<s:property value="test3" /> </td></tr>
    <tr ><td> test4=<s:property value="test4" /> </td></tr>
    <tr ><td> test5=<s:property value="test5" /> </td></tr>
    </table>
    </div></td>
<td></td>
</tr>
</s:if>
<s:else>
<tr class="list-row-odd">
<td style="width:130px"><s:property value="date" /></td>
<td style="width:150px"><s:property value="time" /></td>
<td style="width:88px"><s:property value="userip" /></td>


<td style="width:120px"><s:property value="servclass" /></td>
<td style="width:64px"><s:property value="serverip" /></td>
<td style="width:90px"><s:property value="gotoclass" /></td>
<td  id="text1Id" style="width:195px" onmouseover="showDiv(this)" onmouseout="hideDiv(this)">更多字段
<div alt="在jsp页面中的某一个table中,在某一列的每个td上,鼠标放在每个td上,都会弹出一个对话框,鼠标移开对话框消失,小弟我实现了,但是还是有一些有关问题" />

2.在火狐浏览器下,当弹出窗出现的时候,鼠标可以自己的在弹出窗里面移动,并且不会促发,下一个td鼠标事件。
但是在ie和谷歌浏览器下,鼠标是不能在弹出窗中移动的,每当移到下一个td所在的位置,会促发td鼠标事件,并且弹出窗的位置也会随之变化。





$(".moreList").hover(function(){
var hideDiv=$(this).children("div").eq(0);
 var offset=$(this).offset();
 var top1= offset.top ;//表格td距离页面顶端高度
 var top2= document.documentElement.scrollTop ;//滚动条距离顶端长度
 if(top2==0){
 if((top1>=150)&&(top1-300)){
 hideDiv.css({top:top1-80,left:offset.left+80}); 


 }
 if(top1>=400){
 hideDiv.css({top:top1-280,left:offset.left+80}); 
 }
 if((top1>=300)&&(top1<400)){
 hideDiv.css({top:top1-160,left:offset.left+80});
 }
 }else{
 if(top1-top2<=300){
 hideDiv.css({top:top1,left:offset.left+80}); 
 }
 if((top1-top2<360)&&(top1-top2>300)){
 hideDiv.css({top:top1-280,left:offset.left+80}); 
 }
 if(top1-top2>=360){
 hideDiv.css({top:top1-320,left:offset.left+80}); 
 }
 }
 hideDiv.show();
},function(){
var hideDiv=$(this).children("div").eq(0);
hideDiv.hide();
});建议楼主用hover   这样在每个子元素一下移动的时候,不算是一次mouseout

热点排行