想實(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 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;">更新時間</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里面有個組建可以顯示里面的內(nèi)容，只是顯示的是title，一開始不會改沒用那個，后經(jīng)人點(diǎn)醒，可以直接給title賦值，就是給title賦值為表格里面的text就好。
以上所述是小編給大家介紹的基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
