Я хочу реализовать такую функцию, потому что в таблице слишком много слов, поэтому я использую метод переполнения текста, но я не вижу конкретного содержания в таблице. Я хочу понять, что когда мышь перемещается вверх, скрытый контент может отображаться в этой строке. Конечно, на этом сайте много плагинов, но я не использовал его, поэтому я сам написал.
CSS часть
<style> #showbox {width: 150px; min-height: 50px; font: 100 14px/1 "Microsoft yahei"; граница: 1px solid #3c8dbc; дисплей: нет; позиция: абсолют; вверхHTML Part
<таблица id = "Пример1" rol = "grid"> <tow style = "foangy-color: #e4e9f0;"> <tr rol = "row"> <th rowspan = "2" style = "text-align: center; width: 6%;" colspan = "1"> <font style = "font-weight: bold;"> серийный номер </font> </th> <th rowspan = "2" style = "text-align: center; ширина: 10%;" colSpan = "1"> <font style = "font-weight: bold;"> name </font> </th> <th rowspan = "2" style = "text-align: категория </font> </th> <th rowspan =" 2 "style =" text-align: center; Ширина: 8%; "colspan =" 1 "> <font style =" font-weight: bold; "> Unit </font> </th> <th rowspan =" 2 "style =" text-align: center; Ширина: 26%; "colspan =" 1 "> <font style =" font-weight: bold; "> Требования к достижению </font> </th> <th colspan =" 2 "style =" text-align: center; "rowspan =" 1 "> <font style =" font-weight: bold; "> progress </font> </th> </tr> <tr rol =" row "> <th style =" text-align: center; Ширина: 30%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> Последний прогресс </font> </th> </th> </tr> </tman> <tbody> <tr rol = "row"> <Td> 1 </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </ td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <t d> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> al </td> <td> alare </td> <td> </tr> <tr> <tr> <td> </td> <tr> <tr> <td> </td> <tr> <tr> <tr> </td> <tr> <tr ROLE = "row"> <Td> 3 </td> <Td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> </td> </tr> </tbody> </table> <div Id = "showbox">
JS Part
$ (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 () {console. 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");});Наконец, в начальной загрузке есть компонент, который может отображать содержимое, но показывает заголовок. Это не изменится в начале. После того, как кто -то просыпается, вы можете напрямую назначить заголовок, который просто присваивает заголовок тексту в таблице.
Выше приведено полное содержание этой сетки на основе кода JS, которое редактор представил вам, когда отображается таблица падения мыши. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!