Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich eine scrollbare Tabelle mit gesperrter erster Zeile und Spalte in JavaScript?

Wie erstelle ich eine scrollbare Tabelle mit gesperrter erster Zeile und Spalte in JavaScript?

Susan Sarandon
Susan SarandonOriginal
2024-11-01 23:57:29517Durchsuche

How to Create a Scrollable Table with Locked First Row and Column in JavaScript?

Erste Zeile und erste Spalte in einer scrollbaren Tabelle sperren

Bei dieser Abfrage möchte der Benutzer eine Tabelle erstellen, bei der die erste Zeile und die erste Spalte gesperrt sind, ähnlich wie bei die Funktion „Fenster einfrieren“ in Excel. Die Tabelle sollte sowohl horizontales als auch vertikales Scrollen ermöglichen.

Um dies zu erreichen, reicht CSS allein möglicherweise nicht aus, was zur Erforschung von JavaScript-Lösungen führt. Eine empfohlene Lösung ist ein JavaScript-Plugin namens „fixed-table-rows-cols“.

Fixed-Table-Rows-Cols Plugin

Dieses Plugin wandelt eine formatierte HTML-Tabelle in eine scrollbare Tabelle mit um ein fester Tabellenkopf und feste Spalten. Es ermöglicht das Sperren der ersten Zeile und Spalten.

Verwendung:

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       // Number of fixed columns
    width        : "100%",  // Width of the container
    height       : 500      // Height of the container
});

Vorteile:

  • Ermöglicht flexibles Sperren von Spalten und Überschriften
  • Unterstützt verschiedene Tabellengrößen
  • Funktioniert mit allen gängigen Webbrowsern

Weitere Informationen und eine Live-Demo finden Sie auf dem GitHub des Plugins Repository: https://github.com/meetselva/fixed-table-rows-cols

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine scrollbare Tabelle mit gesperrter erster Zeile und Spalte in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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