JS implémente le code qui affiche tous les contenus de cette boîte lorsque la souris est déplacée vers le tableau

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; Police: 100 14px / 1 "Microsoft Yahei"; Border: 1px solide # 3C8DBC; Affichage: aucun; Position: absolue; en haut: 0; à gauche: 0; Color d'arrière-plan: #FFF; rembourrage: 5px; } </ style>

partie HTML

 <table id = "example1" role = "grid"> <tear style = "background-color: # e4e9f0;"> <tr role = "row"> <th rowspan = "2" style = "text-align: centre; 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-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; "> Dernier progrès </font> </th> <th style =" Text-Align: Center; Largeur: 10%; "Rowspan =" 1 "Colspan =" 1 "> <font style =" font-weight: bold; "> Time de mise à jour </font> </th> </tr> </prowe> <tbody> <tr role =" row "> <td> 1 </td> <td> allare </ td> <td> allare </td> <td> allare </td> <td> allare </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> <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> <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> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </tbody> </s table> <div id = "showbox"> </div>

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, client); $ (Box) .css (Left ", ClientX). ClearTimeout (temporisation); $ (Box) .Hide ();});} Showbox (# Example

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.

Le code qui montre l'intégralité du contenu de cette case lorsque la souris est déplacée vers la table est le contenu entier partagé par l'éditeur. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.