Implement JS based code to display the entire contents of this grid when the mouse hovers over the table

  • 2021-06-28 10:17:54
  • OfStack

To achieve such a function, is in a table, because there are too many words, so the overflow method is used to handle, but then you can not see the specific content of the table.You want to show this hidden line when the mouse moves up.Of course, there are many plug-ins on this network, but I am useless. I wrote one myself.

css Part


<style>
#showbox {
width: 150px;
min-height: 50px;
font: 100 14px/1 " Microsoft YaHei ";
border: 1px solid #3c8dbc;
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 5px;
}
</style>

html Part


<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;"> Sequence Number </font></th>
<th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;"> Name </font></th>
<th rowspan="2" style="text-align: center; width: 10%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;"> category </font></th>
<th rowspan="2" style="text-align: center; width: 8%;" class="sorting_disabled" colspan="1"><font style="font-weight:bold;"> Company </font></th>
<th rowspan="2" style="text-align: center; width: 26%;" class="sorting_disabled " colspan="1"><font style="font-weight:bold;"> Outcome Requirements </font></th>
<th colspan="2" style="text-align: center; " rowspan="1"><font style="font-weight:bold;"> Progress </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;"> Latest Progress </font></th>
<th style="text-align: center; width: 10%;" class="sorting_disabled " rowspan="1" colspan="1"><font style="font-weight:bold;"> Update Time </font></th></tr>
</thead>
<tbody>
<tr role="row">
<td>1</td>
<td> Alaley </td>
<td> Alaley </td>
<td> Alaley </td>
<td> Alaley </td>
<td> Alaley </td>
<td></td>
</tr>
<tr role="row">
<td>2</td>
<td> Alaley </td>
<td> Alaley </td>
<td> Alaley </td>
<td> Alaley </td>
<td> Alaley </td>
<td></td>
</tr>
<tr role="row" class="odd">
<td>3</td>
<td> Alaley </td>
<td> Alaley </td>
<td> Alaley ,</td>
<td> Alaley </td>
<td></td>
</tr>
</tbody>
</table>
<div id="showbox"></div>

js Part


$(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");
});

Finally, in fact, there is a component in bootstrap that can display the content inside, but it only shows title. 1 will not change to use that at first. After waking up, you can assign title directly, that is, to assign title to text in the table.


Related articles: