Quiero implementar dicha función, porque hay demasiadas palabras en una tabla, por lo que uso el método de desbordamiento del texto, pero no puedo ver el contenido específico en la tabla. Quiero darme cuenta de que cuando el mouse se mueve hacia arriba, el contenido oculto se puede mostrar en esta línea. Por supuesto, hay muchos complementos en este sitio web, pero no lo usé, así que escribí uno yo mismo.
Parte de CSS
<style> #showbox {ancho: 150px; min-height: 50px; font: 100 14px/1 "Microsoft Yahei"; border: 1px sólido #3c8dbc; visualparte html
<table id = "ejemplo1" rol = "grid"> <tow style = "de fondo de fondo: #e4e9f0;"> <tr role = "row"> <th rowspan = "2" style = "text-align: centro; ancho: 6%;" colspan = "1"> <font style = "font-weight: bold;"> número de serie </font> </th> <th showspan = "2" style = "text-align: centro; ancho: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <th showspan = "2" style = "text-align: categoría </font> </th> <th rowspan =" 2 "style =" text-align: Center; Ancho: 8%; "colspan =" 1 "> <font style =" font-weight: bold; "> unit </font> </th> <th showspan =" 2 "style =" text-align: center; Ancho: 26%; "colspan =" 1 "> <font style =" font-weight: bold; "> requisitos de logro </font> </th> <th colspan =" 2 "style =" text-align: center; "RowsPan =" 1 "> <font style =" font-weight: bold; "> progreso </font> </th> </tr> <tr role =" row "> <th style =" text-align: center; ancho: 30%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> Último progreso </font> </th> </th> </tr> </tman> <tbody> <tr role = "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 son </td> <td> alare </td> <td> </tr> <tr> <tr> <td> </td> <tr> <tr> <td> </td> <tr> <tr> <tr> <tr> rol = "Row"> <td> 3 </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> </td> </tr> </tbody> </table> <iv id = "divbox"> <viv> <viv>
parte 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 (client, (cliente, (cliente, client, clienty); $ (box) .css ("izquierda", cliente) .css ("top", clienty); if (txt == "") {$ (box) .hide ();} else {$ (box) .show (); $ (box) .html (txt);}},, 1000);}); $ (obj) .on ("mouseout", function () {cleartimeout (temporizador); $ (box) .hide ();});} showbox ("#ESPEMPLE1> tbody td", "#showbox");});Finalmente, hay un componente en Bootstrap que puede mostrar el contenido, pero muestra el título. No cambiará al principio. Después de que alguien se despierta, puede asignar directamente el título, que solo asigna el título al texto en la tabla.
Lo anterior es el contenido completo de esta cuadrícula basado en el código JS que el editor le presentó cuando se muestra la tabla de flotar del mouse. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!