So reparieren Sie den Header in JQuery

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

2. 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:

Breite: 100 %; align: left ;
border-bottom: 1px solid #ddd;
}

th {

background-color: #f2f2f2;
}

tbody {
height: 300px;

overflow-y: scroll;

display: block ;
}

Holen Sie sich den Header


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');
3. 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');
4. $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 = $('f5d188ed2c074f8b944552db028f98a1');

var $new_thead = $('ae20bdd317918ca68efdc799512a9b39');
5. $new_table.append($new_thead );
var $new_tr = $('a34de1251f0d9fe1e645927f19a896e8');

$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();
6. $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);

7. 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();
8. var table_top = $table.offset().top;
if (scroll_top > table_top) {

$thead.css('position', 'fixed');
$thead.css('top', 0);

} else {

$thead.css('position', 'static');
$thead.css('top', '');

}
});

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!