js实现当鼠标移到表格上时显示这一格全部内容的代码


Posted in Javascript onJune 12, 2016

想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件,但是我没有用,还是自己写了一个。

css部分

<style>
    #showbox {
      width: 150px;
      min-height: 50px;
      font: 100 14px/1 "微软雅黑";
      border: 1px solid #3c8dbc;
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff;
      padding: 5px;
    }
  </style>

html部分

<table id="example1" role="grid">
  <thead style="background-color: #E4E9F0;">
  <tr role="row">
    <th rowspan="2" style="text-align: center; width: 6%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">序号</font></th>
    <th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">名称</font></th>
    <th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">类别</font></th>
    <th rowspan="2" style="text-align: center; width: 8%;" class="sorting_disabled" colspan="1"><font style="font-weight:bold;">单位</font></th>
    <th rowspan="2" style="text-align: center; width: 26%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;">成果要求</font></th>
    <th colspan="2" style="text-align: center; " rowspan="1"><font style="font-weight:bold;">进展</font></th></tr>
  <tr role="row">
    <th style="text-align: center; width: 30%;" class="sorting_disabled" rowspan="1" colspan="1"><font style="font-weight:bold;">最新进展</font></th>
    <th style="text-align: center; width: 10%;" class="sorting_disabled " rowspan="1" colspan="1"><font style="font-weight:bold;">更新时间</font></th></tr>
  </thead>
  <tbody>
  <tr role="row">
    <td>1</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td></td>
  </tr>
  <tr role="row">
    <td>2</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td></td>
  </tr>
  <tr role="row" class="odd">
    <td>3</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾</td>
    <td>阿拉蕾,</td>
    <td>阿拉蕾</td>
    <td></td>
  </tr>
  </tbody>
</table>
<div id="showbox"></div>

js部分

$(function() {
    function showBox(obj,box){
      var timer = null;
      $(obj).on("mouseover", function (e) {
        clearTimeout(timer);
        var clientX = e.clientX;
        var clientY = e.clientY;
        var txt = $(this).text();
        timer = setTimeout(function () {
          console.log(clientX, clientY);
          $(box).css("left", clientX).css("top", clientY);
          if (txt == "") {
            $(box).hide();
          } else {
            $(box).show();
            $(box).html(txt);
          }
        }, 1000);
      });
      $(obj).on("mouseout",function(){
        clearTimeout(timer);
        $(box).hide();
      });
    }
    showBox("#example1 > tbody td","#showbox");
  });

最后,其实bootstrap里面有个组建可以显示里面的内容,只是显示的是title,一开始不会改没用那个,后经人点醒,可以直接给title赋值,就是给title赋值为表格里面的text就好。

以上这篇js实现当鼠标移到表格上时显示这一格全部内容的代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
Sort()函数的多种用法
Mar 20 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
浅谈JS中逗号运算符的用法
Jun 12 #Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 #Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 #Javascript
jQuery的each循环用法简单示例
Jun 12 #Javascript
基于jquery插件编写countdown计时器
Jun 12 #Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 #Javascript
浅谈jquery的map()和each()方法
Jun 12 #Javascript
You might like
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP中“=&gt;
2019/03/01 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
斯福泰克软件测试面试题
2015/02/16 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
升职自荐信范文
2013/10/05 职场文书
办理暂住证介绍信
2014/01/11 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
班级读书活动总结
2014/06/30 职场文书
客户经理岗位职责
2015/01/31 职场文书
商务代表岗位职责
2015/02/15 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js