想實(shí)現(xiàn)這樣一個功能，就是在一個表格中，由于很多字過多，所以用文字溢出的方法處理了，但是這樣就無法看到表格中具體的內(nèi)容呢。想實(shí)現(xiàn)當(dāng)鼠標(biāo)移上去的時候可以顯示這一行被隱藏的內(nèi)容。當(dāng)然這個網(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>
<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>進(jìn)展</font></th></tr>
<tr role="row">
<th rowspan="1" colspan="1"><font>最新進(jìn)展</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");
});
最后，其實(shí)bootstrap里面有個組建可以顯示里面的內(nèi)容，只是顯示的是title，一開始不會改沒用那個，后經(jīng)人點(diǎn)醒，可以直接給title賦值，就是給title賦值為表格里面的text就好。
以上所述是小編給大家介紹的基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容，希望對大家有所幫助