解决信息列表中信息名称过长问题

于 2007-09-12 21:24:00 发布
阅读量912 收藏
点赞数
分类专栏： 工作笔记 文章标签： div table border javascript null function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/derpvailzhangfan/article/details/1782730
版权
本文介绍了解决表格列头名称过长导致显示不全的方法。提供了两种解决方案：一种是利用HTML的title属性实现文字提示；另一种是通过JavaScript动态显示悬浮框。详细对比了两者的优缺点，并给出了具体的实现代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

07年9月12日

           正如这个题目所说,开发中会遇到这样的问题,我有两种解决办法,现在把这个问题的关键整理成简单的html页面,简单明了:

         (1)解决办法:
          test1.html

         

<% @ page language="java" contentType="text/html; charset=GBK"  %>
< head >
< title > 查询信息列表 </ title >
</ head >

< html >
  < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
        < tr >
        < td   width ="120" >< div  align ="center" > 频道名称 </ div ></ td >
          < td   width ="120" >< div  align ="center" > 频道描述 </ div ></ td >
          < td   width ="120" >< div  align ="center" > 操作 </ div ></ td >      
        </ tr >          
 </ table >

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是aaaaaaaaaaaaa" >
        < div  align ="center" >
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是aaaaaaaaaaaaa" >
        < div  align ="center" >
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是aaaaaaaaaaaaa" >
        < div  align ="center" >
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >
    
 </ table >    

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是bbbbbbbbbbb" >
        < div  align ="center" >
       bbb
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 222 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是cccccccccccc" >
        < div  align ="center" >
       ccc
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 333 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是dddddddddddddddd" >
        < div  align ="center" >
       ddd
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 444 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="我是eeeeeeeeeeeeeeeeeee" >
        < div  align ="center" >
       eee
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 555 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   


 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"   title ="我是ffffffffffffffff" >
        < div  align ="center" >
       fff
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 666 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >     
 </ table >   

 </ html >

         (2)解决办法(通过javascript控件实现):

         test2.html

  

<% @ page language="java" contentType="text/html; charset=GBK"  %>

< head >
< title > 查询信息列表 </ title >
</ head >
< script  Language ="JavaScript" >  
//***********默认设置定义.********************* 
tPopWait=50;//停留tWait豪秒后显示提示。 
tPopShow=5000;//显示tShow豪秒后关闭提示 
showPopStep=20; 
popOpacity=99; 
//***************内部变量定义***************** 
sPop=null; 
curShow=null; 
tFadeOut=null; 
tFadeIn=null; 
tFadeWaiting=null; 
document.write("<style type='text/css'id='defaultPopStyle'>"); 
document.write(".cPopText {  background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}"); 
document.write("</style>"); 
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>"); 

function showPopupText(){
//alert("in"); 
var o=event.srcElement; 
MouseX=event.x; 
MouseY=event.y; 
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""}; 
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""}; 
if(o.dypop!=sPop) { 
sPop=o.dypop; 
clearTimeout(curShow); 
clearTimeout(tFadeOut); 
clearTimeout(tFadeIn); 
clearTimeout(tFadeWaiting); 
if(sPop==null || sPop=="") { 
dypopLayer.innerHTML=""; 
dypopLayer.style.filter="Alpha()"; 
dypopLayer.filters.Alpha.opacity=0; 
} 
else { 
if(o.dyclass!=null) popStyle=o.dyclass  
else popStyle="cPopText"; 
curShow=setTimeout("showIt()",tPopWait); 
} 
} 
} 
function showIt(){ 
dypopLayer.className=popStyle; 
dypopLayer.innerHTML=sPop; 
popWidth=dypopLayer.clientWidth; 
popHeight=dypopLayer.clientHeight; 
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24 
else popLeftAdjust=0; 
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24 
else popTopAdjust=0; 
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust; 
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust; 
dypopLayer.style.filter="Alpha(Opacity=0)"; 
fadeOut(); 
} 
function fadeOut(){ 
if(dypopLayer.filters.Alpha.opacity<popOpacity) { 
dypopLayer.filters.Alpha.opacity+=showPopStep; 
tFadeOut=setTimeout("fadeOut()",1); 
} 
else { 
dypopLayer.filters.Alpha.opacity=popOpacity; 
tFadeWaiting=setTimeout("fadeIn()",tPopShow); 
} 
} 
function fadeIn(){ 
if(dypopLayer.filters.Alpha.opacity>0) { 
dypopLayer.filters.Alpha.opacity-=1; 
tFadeIn=setTimeout("fadeIn()",1); 
}
} 

 </ script >
< html >

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
      < tr >
        < td   width ="120" >< div  align ="center" > 频道名称 </ div ></ td >
        < td   width ="120" >< div  align ="center" > 频道描述 </ div ></ td >
        < td   width ="120" >< div  align ="center" > 操作 </ div ></ td >      
      </ tr >              
 </ table >

< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是aaaaaaaaaaaaaa" />
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >
</ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是aaaaaaaaaaaaaa" />
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >
</ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是aaaaaaaaaaaaaa" />
       aaa
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >
</ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是bbbbbbbbbbbbbbbbbb" />
       bbb
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 222 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是cccccccccccccccccccc" />
       ccc
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 333 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是ddddddddddddddddddddddd" />
       ddd
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 444 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是eeeeeeeeeeeeeeeeeeeeeeeeee" />
       eee
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 555 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >        
        </ td >
     </ tr >     
 </ table >   

 < table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120" >
        < div  align ="center" >
        < span  id ="name"  onMouseOver ="showPopupText()"  title ="我是ffffffffffffffffffffffff" />
       fff
        </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 666 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   

 </ html >

 

          这两种办法的好坏:           

          这两种办法都可以解决列表中列表信息名称过长的问题,第一种办法是鼠标划到相应的名称上就出现悬浮框,鼠标移开,相应的悬浮框就立刻消失.第二种是通过javascript实现的,鼠标划到相应的名称上就出现悬浮框,鼠标移开,相应的悬浮框就慢慢消失.而且第二种办法可以改javascript来调整悬浮框的位置和显示字体的大小.但是有个小bug,就是一但有重名的名称时,这个通过javascript方法只显示一次,其它重名的就无法显示.但是第一种解决办法就不会有这样的情况.可是第一种解决办法无法控制悬浮框的位置和显示字体的大小以及悬浮框的显示时间,悬浮框的底色等等.比较这两个html页面中aaa的信息就知道了.（9月13日），今天把上面那个javascript改了一个地方，小bug问题解决了，在

function showPopupText(){
//alert("in");
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
        if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(true) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass 
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}

注意红色的部分，原来是if(o.dypop!=sPop)改成true就好了。相比之下，我还是觉得通过javascript方法实现的好一些。

       使用说明:

      

<%
       List  list = request.getAttribute("fileList");
       for( int i = 0 ; i < list.size() ;  i++ ) {
           String  fileName = ((TfileVO)list.get(i)).getFileName();
           if(fileName.length() >= 12  ){
                 fileName =  fileName..substring(0,12);
           }
 %>
< table  width ="100%"  height ="26"  border ="0"  cellpadding ="0"  cellspacing ="0"  bgcolor ="#D9D9D9" >
     < tr >
        < td   width ="120"  title ="<%=((TfileVO)list.get(i)).getFileName()%>" >
        < div  align ="center" >
        <% = fileName %>        
                          </ div >
        </ td >
        < td   width ="120" >< div  align ="center" > 111 </ div ></ td >
        < td   width ="120" >
            < a  href ="#" > 查看 </ a >
            < a  href ="#" > 修改 </ a >
            < a  href ="#" > 删除 </ a >            
        </ td >
     </ tr >     
 </ table >   
 <%
   }
} 
 %>

 

       就拿一个页面来说即可,因为这两个页面的使用都是一样的.(test1.html)来说吧,假如说从List循环里取出fileName这个变量,然后判断fileName长度是否大于等于12,如果是就截取,把fileName放在下面代码紫色位置

    <td  width="120" title="<%= ((TfileVO)list.get(i)).getFileName() %>">
    <div align="center">
    <%=fileName%>   

    </div>
    </td>

然后把((TfileVO)list.get(i)).getFileName()这个变量放在上面代码红色的位置就行了,通过javascript方法实现的那个 页面也是同样原理.

   

<%
       List  list = request.getAttribute("fileList");
       for( int i = 0 ; i < list.size() ;  i++ ) {
           String  fileName = ((TfileVO)list.get(i)).getFileName();
           if(fileName.length() >= 12  ){
                 fileName =  fileName..substring(0,12);
           }
 %>
<table width="100%" height="26" border="0" cellpadding="0" cellspacing="0" bgcolor="#D9D9D9">
         <tr>
             <td  width="120">
            <div align="center">
            <span id="name" onMouseOver="showPopupText()" title="<%=((TfileVO)list.get(i)).getFileName()%>"/>
            <%=fileName%>           
            </div>
          </td>
          <td  width="120"><div align="center">111</div></td>
          <td  width="120">
          <a href="#">查看</a>
          <a href="#">修改</a>
          <a href="#">删除</a>      
        </td>
      </tr>
 </table>  <%
   }
} 
 %>

说得太傻瓜了,我要疯了...

 

    

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值