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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
js 函数调用模式小结
Dec 26 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
详解JSON.stringify()的5个秘密特性
May 26 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 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大转盘中奖概率算法实例
2014/10/21 PHP
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
python实现保存网页到本地示例
2014/03/16 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python使用剪切板的方法
2017/06/06 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
python执行使用shell命令方法分享
2017/11/08 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
护理专业自我鉴定
2014/01/30 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
护士岗位职责
2014/02/16 职场文书
留学推荐信范文
2014/05/10 职场文书
高效课堂教学反思
2016/02/24 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript