基于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 写类方式之八
Jul 05 Javascript
动态表格Table类的实现
Aug 26 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vant自定义二级菜单操作
Nov 02 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常用ODBC函数集(详细)
2013/06/24 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python getpass实现密文实例详解
2019/09/24 Python
python循环输出三角形图案的例子
2019/11/22 Python
python小项目之五子棋游戏
2019/12/26 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python 解析简单的XML数据
2020/07/24 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
特步官方商城:Xtep
2017/03/21 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
毕业自我鉴定
2013/11/05 职场文书
平面设计师的工作职责
2013/11/21 职场文书
根叔历年演讲稿
2014/05/20 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
关于JavaScript轮播图的实现
2021/11/20 Javascript