基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
想实现这样一个功能，就是在一个表格中，由于很多字过多，所以用文字溢出的方法处理了，但是这样就无法看到表格中具体的内容呢。想实现当鼠标移上去的时候可以显示这一行被隐藏的内容。当然这个网上有很多插件，但是我没有用，还是自己写了一个。
css部分
<style>
#showbox{
width:150px;
min-height:50px;
font:10014px/1"微软雅黑";
border:1pxsolid#3c8dbc;
display:none;
position:absolute;
top:0;
left:0;
background-color:#fff;
padding:5px;
}
</style>
html部分
<tableid="example1"role="grid"> <theadstyle="background-color:#E4E9F0;"> <trrole="row"> <throwspan="2"style="text-align:center;width:6%;"class="sorting_disabled"colspan="1"><fontstyle="font-weight:bold;">序号</font></th> <throwspan="2"style="text-align:center;width:10%;"class="sorting_disabled"colspan="1"><fontstyle="font-weight:bold;">名称</font></th> <throwspan="2"style="text-align:center;width:10%;"class="sorting_disabled"colspan="1"><fontstyle="font-weight:bold;">类别</font></th> <throwspan="2"style="text-align:center;width:8%;"class="sorting_disabled"colspan="1"><fontstyle="font-weight:bold;">单位</font></th> <throwspan="2"style="text-align:center;width:26%;"class="sorting_disabled"colspan="1"><fontstyle="font-weight:bold;">成果要求</font></th> <thcolspan="2"style="text-align:center;"rowspan="1"><fontstyle="font-weight:bold;">进展</font></th></tr> <trrole="row"> <thstyle="text-align:center;width:30%;"class="sorting_disabled"rowspan="1"colspan="1"><fontstyle="font-weight:bold;">最新进展</font></th> <thstyle="text-align:center;width:10%;"class="sorting_disabled"rowspan="1"colspan="1"><fontstyle="font-weight:bold;">更新时间</font></th></tr> </thead> <tbody> <trrole="row"> <td>1</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td></td> </tr> <trrole="row"> <td>2</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td></td> </tr> <trrole="row"class="odd"> <td>3</td> <td>阿拉蕾</td> <td>阿拉蕾</td> <td>阿拉蕾,</td> <td>阿拉蕾</td> <td></td> </tr> </tbody> </table> <divid="showbox"></div>
js部分
$(function(){
functionshowBox(obj,box){
vartimer=null;
$(obj).on("mouseover",function(e){
clearTimeout(timer);
varclientX=e.clientX;
varclientY=e.clientY;
vartxt=$(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>tbodytd","#showbox");
});
最后，其实bootstrap里面有个组建可以显示里面的内容，只是显示的是title，一开始不会改没用那个，后经人点醒，可以直接给title赋值，就是给title赋值为表格里面的text就好。
以上所述是小编给大家介绍的基于JS代码实现当鼠标悬停表格上显示这一格的全部内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！