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实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
关于element的表单组件整理笔记
Feb 05 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP微信分享开发详解
2017/01/14 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python线性回归实战分析
2018/02/01 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python版大富翁源代码分享
2018/11/19 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
大学生预备党员自我评价分享
2013/11/16 职场文书
新任教师自我鉴定
2014/02/24 职场文书
广播体操比赛口号
2014/06/10 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server