截取一定长度字符串显示并设置鼠标事件

对Table中某个Td设置事件，如果数据超过一定长度字符则用省略号替代其他多余字符，而当鼠标移在该TD上时则浮现一个层显示其全部数据，移开时该层消失.

js代码：

<script type="text/javascript">

$(function(){     

　　$(".titleli").each(function(i){         

　　　　var p = $(this);         

　　　　var bp = $("#titleinfo");         

　　　　var w = this.width;         

　　　　p.mouseover(function(){             

　　　　　　bp.fadeIn();             

　　　　　　var offset = p.offset();            

　　　　　　var left =offset.left+150;  //设置左侧距离            

　　　　　　var top=offset.top-5;   //设置上面距离            

　　　　　　bp.css("top", top).css("left",left);             

　　　　　　bp.html(p.find('input:hidden').val());         

　　　　}).mouseout(function(){                    });     

　　});    

　　$("#titleinfo").mouseout(function(){    

　　　　$(this).fadeOut();        

　　});  

}); 

</script>

jsp页面：

<td <c:if test="${fn: length(title)>11}"> class="titleli"</c:if> >  <!-- 如果超过了长度则有鼠标事件，否则没有 -->    

　　<input type="hidden" value="${title }" />  <!-- 浮出的层中显示的内容 -->    

　　<c:if test="${fn: length(title)>11}">         ${fn: substring(title, 0, 12)}...     </c:if>    

　　<c:if test="${fn: length(title)<=11}">${title}</c:if>

</td>

……

<div class="box-wid-ins-02" style="position: absolute;z-index: 100;min-height: 60px;height: auto;display: none;width: 200px;" id="titleinfo"></div>

 

注：<c:if test=""></c:if>标签和${fn:   } 标签的使用需要在文件头引入下面两个标签库：      

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

转载于:https://www.cnblogs.com/Sara-shi/archive/2013/01/30/mouseEventForTd.html