Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法


Posted in Javascript onSeptember 16, 2019

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实现表格溢出内容省略号显示,悬停显示全部的方法

Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法

以上这篇Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
详解iframe与frame的区别
Jan 13 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
js创建数组的简单方法
Jul 27 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 #Javascript
解决微信小程序中的滚动穿透问题
Sep 16 #Javascript
微信小程序左滑删除实现代码实例
Sep 16 #Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 #Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 #Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 #Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 #Javascript
You might like
PHP 日,周,月点击排行统计
2012/01/11 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
js实现碰撞检测
2021/01/29 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python3中property使用方法详解
2019/04/23 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
新闻专业个人求职信
2013/12/19 职场文书
10的分与合教学反思
2014/04/30 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
银行先进个人总结
2015/02/15 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis