Heim Web-Frontend Front-End-Fragen und Antworten So reparieren Sie den Header in JQuery

So reparieren Sie den Header in JQuery

May 28, 2023 pm 12:17 PM

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
  1. 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');
  1. 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');
  1. $tbody.css('height ', '300px');
  2. $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();
    1. $new_tr.append($clone);
    2. });

    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);
    1. 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();
    1. var table_top = $table.offset().top;
    2. if (scroll_top > table_top) {
    $thead.css('position', 'fixed');
    $thead.css('top', 0);
    Nach dem Login kopieren

    } else {

    $thead.css('position', 'static');
    $thead.css('top', '');
    Nach dem Login kopieren

    }
    });

    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

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    Repo: Wie man Teamkollegen wiederbelebt
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen? Mar 19, 2025 pm 03:58 PM

    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.

    Erklären Sie das Konzept des faulen Ladens. Erklären Sie das Konzept des faulen Ladens. Mar 13, 2025 pm 07:47 PM

    Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.

    Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben? Mar 18, 2025 pm 01:44 PM

    Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.

    Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile? Mar 18, 2025 pm 01:45 PM

    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

    Wie funktioniert der React -Versöhnungsalgorithmus? Wie funktioniert der React -Versöhnungsalgorithmus? Mar 18, 2025 pm 01:58 PM

    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.

    Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen? Mar 19, 2025 pm 03:59 PM

    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.

    Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Wie verhindern Sie das Standardverhalten bei Ereignishandlern? Mar 19, 2025 pm 04:10 PM

    In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.

    Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Was sind die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten? Mar 19, 2025 pm 04:16 PM

    Der Artikel erörtert die Vor- und Nachteile kontrollierter und unkontrollierter Komponenten bei React, wobei sich auf Aspekte wie Vorhersehbarkeit, Leistung und Anwendungsfälle konzentriert. Es rät zu Faktoren, die bei der Auswahl zwischen ihnen berücksichtigt werden müssen.

    See all articles