基于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、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
php ctype函数中文翻译和示例
2014/03/21 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
jquery实现图片平滑滚动详解
2017/03/22 jQuery
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python中单、双下划线的区别总结
2017/12/01 Python
对pandas处理json数据的方法详解
2019/02/08 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
采购部部长岗位职责
2014/02/06 职场文书
企业消防安全责任书
2014/07/23 职场文书
教师党员承诺书2015
2015/01/21 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
vue+spring boot实现校验码功能
2021/05/27 Vue.js
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技