| 标题 | 基于JS代码实现当鼠标悬停表格上显示这一格的全部内容 |
| 内容 | 想实现这样一个功能，就是在一个表格中，由于很多字过多，所以用文字溢出的方法处理了，但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。 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> <tr role="row"> <th rowspan="2" colspan="1"><font>序号</font></th> <th rowspan="2" colspan="1"><font>名称</font></th> <th rowspan="2" colspan="1"><font>类别</font></th> <th rowspan="2" colspan="1"><font>单位</font></th> <th rowspan="2" colspan="1"><font>成果要求</font></th> <th colspan="2" rowspan="1"><font>进展</font></th></tr> <tr role="row"> <th rowspan="1" colspan="1"><font>最新进展</font></th> <th rowspan="1" colspan="1"><font>更新时间</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"> <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代码实现当鼠标悬停表格上显示这一格的全部内容，希望对大家有所帮助 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。