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 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
Javascript的this详解
Mar 23 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
简单实现js浮动框
2016/12/13 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python采集百度百科的方法
2015/06/05 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python实现大转盘抽奖效果
2019/01/22 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
2014年自我评价
2014/01/04 职场文书
市级文明单位申报材料
2014/05/07 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers