想實現(xiàn)這樣一個功能，就是在一個表格中，由于很多字過多，所以用文字溢出的方法處理了，但是這樣就無法看到表格中具體的內(nèi)容呢。想實現(xiàn)當鼠標移上去的時候可以顯示這一行被隱藏的內(nèi)容。當然這個網(wǎng)上有很多插件，但是我沒有用，還是自己寫了一個。

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里面有個組建可以顯示里面的內(nèi)容，只是顯示的是title，一開始不會改沒用那個，后經(jīng)人點醒，可以直接給title賦值，就是給title賦值為表格里面的text就好。

以上所述是小編給大家介紹的基于JS代碼實現(xiàn)當鼠標懸停表格上顯示這一格的全部內(nèi)容，希望對大家有所幫助