Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
更新时间：2019年09月16日 17:31:53 作者：风灵使
今天小编就为大家分享一篇Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格内容溢出省略号显示</title>
<style type="text/css">
.contain {
font-family: ‘ Microsoft YaHei ';
margin: 15px auto;
width: 900px;
}
table {
border: 1px solid #e3e6e8;
border-collapse: collapse;
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}
th, td {
border: 1px solid #e3e6e8;
height: 38px;
line-height: 38px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
th {
background-color: #189AD6;
color: #fff;
}
.layui-layer {
word-break: break-all;
word-wrap: break-word;
}
</style>
<!--relate to this page javascript-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</head>
<body>
<div class="contain">
<table>
<thead>
<th>货币</th>
<th>本周收盘</th>
<th>上周收盘</th>
<th>涨跌</th>
<th>幅度</th>
</thead>
<tbody>
<tr>
<td>EURGBP“EUR/GBP settled above 0.90 on Friday as the bounce in EUR/USD helped the lift the pair further into the 0.90 territory”.</td>
<td>0.86333333333393222222</td>
<td>0.88945555555555555553</td>
<td>-203333333333333333111</td>
<td>-2.3166%</td>
</tr>
<tr>
<td>EURGBP</td>
<td>0.8693</td>
<td>0.8894</td>
<td>-201</td>
<td>-2.31%</td>
</tr>
<tr>
<td>EURGBP</td>
<td>0.8693</td>
<td>0.8894</td>
<td>-201</td>
<td>-2.31%</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(function() {
$("td").on("mouseenter", function() {
//js主要利用offsetWidth和scrollWidth判断是否溢出。
//在这里scrollWidth是包含内容的完全高度，offsetWidth是当前表格单元格的宽度。
if (this.offsetWidth < this.scrollWidth) {
var that = this;
var text = $(this).text();
window.layer.tips(text, that, {
tips: 1,
time: 2000
});
}
});
})
</script>
</body>
</html>
效果如图:
以上这篇Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Sample script that displays all of the users in a given SQL
Sample script that displays all of the users in a given SQL Server DB...2007-06-06
javascript实现table选中的行以指定颜色高亮显示的方法
这篇文章主要介绍了javascript实现table选中的行以指定颜色高亮显示的方法,实例分析了javascript操作table表格元素与相关样式的技巧,需要的朋友可以参考下2015-05-05
存储有序的元素集合，但不同于数组，链表中的元素在内存中不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（也称指针或链接）组成。下面通过本文给大家详细介绍下，需要的朋友参考下2016-11-11
这篇文章主要介绍了JS数组方法slice()用法,结合实例形式分析了JavaScript数组slice()方法具体功能、用法及相关操作注意事项,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了微信小程序 wx.login解密出现乱码的问题解决办法的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了javascript闭包，闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现，感兴趣的小伙伴们可以参考一下2016-01-01
Angular+Bootstrap+Spring Boot实现分页功能实例代码
这篇文章主要介绍了Angular+Bootstrap+Spring Boot实现分页功能实例代码,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了JS实现选项卡的方法,结合实例形式详细讲述了JavaScript实现选项卡的布局与功能实现的完整步骤及相关技巧,需要的朋友可以参考下2015-11-11
这篇文章主要介绍了简单了解JS打开url的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了JS实现的简单折叠展开动画效果,可实现类似百度页面分享按钮一样的折叠展开动画效果,涉及javascript页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-04-04
最新评论