资源预览内容
第1页 / 共5页
第2页 / 共5页
第3页 / 共5页
第4页 / 共5页
第5页 / 共5页
亲,该文档总共5页全部预览完了,如果喜欢就下载吧!
资源描述
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件,但是我没有用,还是自己写了一个。css部分#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;html部分序号名称类别单位成果要求进展最新进展更新时间1阿拉蕾阿拉蕾阿拉蕾阿拉蕾阿拉蕾2阿拉蕾阿拉蕾阿拉蕾阿拉蕾阿拉蕾3阿拉蕾阿拉蕾阿拉蕾,阿拉蕾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代码实现当鼠标悬停表格上显示这一格的全部内容,希望对大家有所帮助
收藏 下载该资源
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号