这篇文章主要介绍了基于 JS 代码实现当鼠标悬停表格上显示这一格的全部内容 的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件,但是我没有用,还是自己写了一个。
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 代码实现当鼠标悬停表格上显示这一格的全部内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0302/264969.html