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 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
20个最新的jQuery插件
Jan 13 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
简单实现php上传文件功能
2017/09/21 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
经典c++面试题六
2012/01/18 面试题
公务员转正考察材料
2014/02/07 职场文书
高三毕业寄语
2014/04/10 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
促销活动总结范文
2014/04/30 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
基层党组织整改方案
2014/10/25 职场文书
个人党性分析材料
2014/12/19 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL