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-hohe: 50px; Schriftart: 100 14px/1 "Microsoft Yahei"; Grenze: 1PX Solid #3c8dbc; Anzeige: Keine; Position: absolut; Top: 0; links: 0; Hintergrundfarbe: #fff; Polsterung: 5px; } </style>HTML -Teil
<table id = "example1" rollen = "grid"> <reme style colspan = "1"> <font style = "Schriftgewicht: BOLD;"> Seriennummer </font> </th> <th rowspan = "2" style = "text-align: center; width: 10%;" colspan = "1"> <font style = "Schriftgewicht: BOLD;"> Name </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; Breite: 30%; "RowSpan =" 1 "colspan =" 1 "> <font style =" font-weight: BOLD; "> Neueste Fortschritt </font> </th> <th style =" text-align: center; width: 10%;" rowspan="1" colspan="1"><font style="font-weight:bold;">Update time</font></th></tr> </tour> <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> <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> </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 (); $ (Box) .CSS ("links", Clientx) .CSS ("TOP", clienty); 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.
Der Code, der den gesamten Inhalt dieses Feldes zeigt, wenn die Maus in die Tabelle verschoben wird, ist der gesamte Inhalt, der vom Editor geteilt wird. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.