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 相关文章推荐
Javascript判断对象是否相等实现代码
Mar 18 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
微信小程序调用后台service教程详解
Nov 06 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中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jquery text()要注意啦
2009/10/30 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
node网页分段渲染详解
2016/09/05 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
Python实现二分查找算法实例
2015/05/26 Python
python实现学生信息管理系统
2020/04/05 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python json格式化打印实现过程解析
2020/07/21 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
PHP经典面试题
2016/09/03 面试题
房地产销售大学生自我评价分享
2013/11/11 职场文书
迎七一演讲稿
2014/09/12 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
高三英语教学反思
2016/03/03 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL