基于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 面向对象(创建对象)
Mar 30 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
jQuery的each循环用法简单示例
Jun 12 #Javascript
基于jquery插件编写countdown计时器
Jun 12 #Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 #Javascript
浅谈jquery的map()和each()方法
Jun 12 #Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 #Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 #Javascript
使用Script元素发送JSONP请求的方法
Jun 12 #Javascript
You might like
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
其他功能
2006/10/09 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python实现粒子群算法
2020/10/15 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
小学教育毕业生自荐信
2013/11/18 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
报关报检委托书
2014/04/08 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
公司承诺书格式
2014/05/21 职场文书
会计学专业自荐信
2014/06/25 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
教师业务学习材料
2014/12/16 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
学校捐书活动总结
2015/05/08 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL