想實(shí)現(xiàn)這樣一個(gè)功能，就是在一個(gè)表格中，由于很多字過多，所以用文字溢出的方法處理了，但是這樣就無法看到表格中具體的內(nèi)容呢。想實(shí)現(xiàn)當(dāng)鼠標(biāo)移上去的時(shí)候可以顯示這一行被隱藏的內(nèi)容。當(dāng)然這個(gè)網(wǎng)上有很多插件，但是我沒有用，還是自己寫了一個(gè)。
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;">進(jìn)展</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;">最新進(jìn)展</font></th> <th style="text-align: center; width: 10%;" class="sorting_disabled " rowspan="1" colspan="1"><font style="font-weight:bold;">更新時(shí)間</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"); });最后，其實(shí)bootstrap里面有個(gè)組建可以顯示里面的內(nèi)容，只是顯示的是title，一開始不會(huì)改沒用那個(gè)，后經(jīng)人點(diǎn)醒，可以直接給title賦值，就是給title賦值為表格里面的text就好。
以上這篇js實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時(shí)顯示這一格全部內(nèi)容的代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
