基于JS代码实现当鼠标悬停表格上显示这一格的全部内容

2019-11-20 09:43:57

字体：大中小

来源：转载

供稿：网友

想实现这样一个功能，就是在一个表格中，由于很多字过多，所以用文字溢出的方法处理了，但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。

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代码实现当鼠标悬停表格上显示这一格的全部内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：Node.js Addons翻译(C/C++扩展)

下一篇：jQuery的each循环用法简单示例