jQuery ist eine weit verbreitete JavaScript-Bibliothek, die die dynamische Bearbeitung von Webseiten erleichtert. Tabellen sind eine häufige Komponente in vielen Webanwendungen. Wenn die Tabelle jedoch zu lang ist, müssen Benutzer möglicherweise scrollen, um den Inhalt anzuzeigen, und die Kopfzeile verschwindet vom oberen Bildschirmrand. Um die Verwendung der Tabelle zu vereinfachen, können Sie die Kopfzeile mit jQuery am oberen Bildschirmrand anheften, sodass sie immer sichtbar ist. In diesem Artikel stellen wir vor, wie Sie jQuery zum Korrigieren des Headers verwenden.
1. Bereiten Sie die Tabelle vor
Zuerst müssen Sie ein HTML-Dokument vorbereiten, das die Tabelle enthält. Hier ist ein einfaches Beispielformular:
Name
Telefon
E-Mail
Zhang San
1234567890
zhangsan@example.com
John Doe
0987654321
lisi@example.com
王五
4567891230
wangwu@example.com
CSS-Stile hinzufügen
Als nächstes müssen Sie einige CSS-Stile hinzufügen, damit die Tabelle wie Ihre Website oder Anwendung aussieht und sich verhält. Sie können die folgenden Stile als Ausgangspunkt verwenden und sie dann nach Bedarf ändern:
Um den Header zu reparieren, müssen Sie zuerst die Referenz des Headers abrufen. Sie können den Tabellenkopf mit dem folgenden Code abrufen:
var $table = $('table'); var $thead = $table.find('thead');
var $th = $thead.find(' th' );
Holen Sie sich den Tabellenkörper
Als nächstes müssen Sie einen Verweis auf den Tabellenkörper erhalten. Um die Ausrichtung von Tabellenkopf und Tabellenkörper sicherzustellen, müssen Sie den Tabellenkörper scrollbar machen und ihn als Element auf Blockebene anzeigen. Sie können den Tabellenkörper mit dem folgenden Code abrufen:
var $tbody = $table.find('tbody');$tbody.css('display', 'block');
$tbody.css('height ', '300px');
$tbody.css('overflow-y', 'scroll');
Erstellen Sie eine neue Tabelle
Jetzt müssen Sie eine neue Tabelle erstellen, die den zuvor erhaltenen Header und Text enthält . Sie können eine neue Tabelle mit dem folgenden Code erstellen:
var $new_table = $('
');var $new_thead = $('');
$new_table.append($new_thead );
var $new_tr = $('
');$new_thead.append($new_tr);
Kopfzeilenzellen kopieren
Als nächstes müssen Sie jede Zelle in der Kopfzeile kopieren und hinzufügen in die erste Zeile der neuen Tabelle einfügen. Sie können dies mit dem folgenden Code tun:
$th.each(function() { var $clone = $(this).clone();
$new_tr.append($clone);
});
Neue Tabelle in DOM einfügen
Abschließend müssen Sie die neue Tabelle vor der ursprünglichen Tabelle in das DOM einfügen. Sie können dies mit dem folgenden Code tun:
$new_table.insertBefore($table);
Fester Header
Jetzt haben Sie eine neue Tabelle mit einem festen Header erstellt und in das DOM eingefügt. Wenn der Benutzer jedoch über den Bildschirm scrollt, wird die Kopfzeile immer noch nicht angezeigt. Um die Kopfzeile zu korrigieren, können Sie die Position der Kopfzeile basierend auf dem Scroll-Offset anpassen, wenn ein Scroll-Ereignis auftritt. Sie können den folgenden Code verwenden, um diese Funktion zu erreichen: $(window).scroll(function() { var scroll_top = $(this).scrollTop();
Dieser Code wird ausgelöst, wenn im Fenster gescrollt wird, und setzt die Tabellenkopfposition basierend auf dem Scroll-Offset auf fest oder statisch . Wenn der Scroll-Offset größer ist als der Offset oben in der Tabelle, legen Sie die Kopfzeile auf „Fixed“ fest. Andernfalls setzen Sie den Header auf statisch.
An diesem Punkt haben Sie den Header erfolgreich repariert. Während der Benutzer scrollt, bleibt die Kopfzeile oben auf dem Bildschirm und bewegt sich mit dem Scrollen. Mit diesem einfachen Tipp können Sie die Benutzerfreundlichkeit und Zugänglichkeit Ihrer Webanwendung ganz einfach verbessern.
Das obige ist der detaillierte Inhalt vonSo reparieren Sie den Header in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.
Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.
Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.
In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens
In Artikel werden die Verbindungskomponenten an Redux Store mit Connect () verbinden, wobei MapStatetoprops, MapDispatchtoprops und Leistungsauswirkungen erläutert werden.
Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.
In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.
In dem Artikel wird in der Implementierung benutzerdefinierter Hooks in React erörtert, wobei der Schwerpunkt auf deren Erstellung, Best Practices, Leistungsvorteilen und gemeinsamen Fallstricks zu vermeiden ist.
