Je veux implémenter une telle fonction, car il y a trop de mots dans un tableau, donc j'utilise la méthode de texte débordant, mais je ne vois pas le contenu spécifique du tableau. Je veux réaliser que lorsque la souris est déplacée, le contenu caché peut être affiché dans cette ligne. Bien sûr, il existe de nombreux plug-ins sur ce site, mais je ne l'ai pas utilisé, alors j'en ai écrit un moi-même.
Partie CSS
<style> #showbox {width: 150px; min-height: 50px; font: 100 14px / 1 "Microsoft Yahei"; bordure: 1px solide # 3c8dbc; affichage: non; position: absolu; top: 0; gauche: 0; background-colore: #fff; padding: 5px;} </ylepartie HTML
<table id = "example1" role = "grid"> <tow style = "background-Color: # e4e9f0;"> <tr role = "row"> <th rowspan = "2" style = "text-adign: Center; width: 6%;" colspan = "1"> <font style = "font-weight: bold;"> numéro de série </font> </th> <th rowspan = "2" style = "text-adign: Center; width: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <th rowspan = "2" style = "text-align: catégorie </font> </th> <th rowspan =" 2 "style =" text-aalign: Center; Largeur: 8%; "ColSpan =" 1 "> <font style =" font-weight: bold; "> unité </font> </th> <th rowspan =" 2 "style =" text-adign: Center; Largeur: 26%; "ColSpan =" 1 "> <font style =" font-weight: bold; "> Requirement exigences </font> </th> <th Colspan =" 2 "style =" text-align: Center; "rowspan =" 1 "> <font style =" font-weight: bold; "> Progress </font> </th> </tr> <tr role =" row "> <th style =" text-adign: Center; Largeur: 30%; "Rowspan =" 1 "Colspan =" 1 "> <font style =" font-weight: bold; "> Dernières progrès </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 sont </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> </pall
partie js
$ (function () {fonction showbox (obj, box) {var timer = null; $ (obj) .on ("muouseOver", 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 ("muouseout", function () {ClearTimeout (timer); $ (box) .hide ();});} showbox ("# example1> tbody td", "# showbox");});Enfin, il y a un composant en bootstrap qui peut afficher le contenu, mais il affiche le titre. Il ne changera pas au début. Après que quelqu'un se soit réveillé, vous pouvez attribuer directement le titre, qui est simplement d'attribuer le titre au texte dans le tableau.
Ce qui précède est le contenu complet de cette grille en fonction du code JS que l'éditeur vous a présenté lorsque la table de survol de la souris s'affiche. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!