Ich möchte eine solche Funktion implementieren, da es in einer Tabelle zu viele Wörter gibt, daher verwende ich die Methode des überfüllten Textes, aber ich kann den spezifischen Inhalt in der Tabelle nicht sehen. Ich möchte erkennen, dass der versteckte Inhalt in dieser Zeile angezeigt werden kann, wenn die Maus hochgezogen wird. Natürlich gibt es auf dieser Website viele Plug-Ins, aber ich habe es nicht benutzt, also habe ich selbst einen geschrieben.
CSS -Teil
<Styles> #Showbox {width: 150px; min-height: 50px; Schriftart: 100 14px/1 "microsoft yahei"; Border: 1px Solid #3c8dbc; Anzeige: Keine; Position: Absolute; ober: 0;HTML -Teil
<table id = "example1" rollen = "grid"> <toW style = "background-color: #e4e9f0;"> <trollen = "row"> <th rowspan = "2" style = "text-align: center; width: 6%;" colspan = "1"> <font style = "Schriftgewicht: BOLD;"> Seriennummer </font> </th> <th rowspan = "2" style = "text-align: center; width: 10%;" colspan = "1"> <font style = "font-weight: BOLD;"> Name </font> </th> <th rowspan = "2" style = "text-align: kategorie </font> </th> <th rowspan =" 2 "style =" style-align: center; Breite: 8%; "colspan =" 1 "> <font style =" Schriftgewicht: BOLD; "> Einheit </font> </th> <th rowspan =" 2 "style =" text-align: center; Breite: 26%; "colspan =" 1 "> <font style =" Schriftgewicht: BOLD; "> Leistungsanforderungen </font> </th> <th colspan =" 2 "style =" text-align: center; "RowSpan =" 1 "> <font style =" Schriftgewicht: BOLD; "> Fortschritt </font> </th> </tr> <tr rollen =" row "> <th style =" text-align: center; Weit: 30%; rollen = "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 sind </td> <td> Alare </td> <td> </tr> <tr> <tr> <Td> </td> <tr> <tr> <Td> </td> <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"></div>
JS Teil
$ (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 clienty); 1000);}); $ (obj) .on ("mausout", function () {Cleartimeout (Timer);Schließlich gibt es eine Komponente in Bootstrap, die den Inhalt anzeigen kann, aber sie zeigt den Titel an. Es wird sich am Anfang nicht ändern. Nachdem jemand aufgewacht ist, können Sie den Titel direkt zuweisen, der den Titel nur dem Text in der Tabelle zuweist.
Das obige ist der vollständige Inhalt dieses Netzes, der auf JS -Code basiert, den der Editor Ihnen vorgestellt hat, wenn die Maus -Schwebentabelle angezeigt wird. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!