js實(shí)現(xiàn)當(dāng)鼠標(biāo)移到表格上時顯示這一格全部內(nèi)容的代碼
想實(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)容的代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- 基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容
- JS實(shí)現(xiàn)的表格行鼠標(biāo)點(diǎn)擊高亮效果代碼
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行變色的方法
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊展開或隱藏表格行的方法
- 鼠標(biāo)拖動動態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- 一個簡單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡潔實(shí)現(xiàn)
- Javaweb 鼠標(biāo)移入移出表格顏色變化的實(shí)現(xiàn)
相關(guān)文章
起點(diǎn)頁面?zhèn)髦礿s,有空研究學(xué)習(xí)下
起點(diǎn)上的頁面?zhèn)髦礿s,有空研究下2010-01-01能說明你的Javascript技術(shù)很爛的五個原因分析
Javascript在互聯(lián)網(wǎng)上名聲很臭,但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言2011-10-10微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01js實(shí)現(xiàn)點(diǎn)擊鏈接后延遲3秒再跳轉(zhuǎn)的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊鏈接后延遲3秒再跳轉(zhuǎn)的方法,通過javascript的setTimeout方法實(shí)現(xiàn)延遲跳轉(zhuǎn)的功能,需要的朋友可以參考下2015-06-06JavaScript轉(zhuǎn)換數(shù)據(jù)庫DateTime字段類型方法
下面小編就為大家?guī)硪黄狫avaScript轉(zhuǎn)換數(shù)據(jù)庫DateTime字段類型方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
這篇文章主要介紹了微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01