Wie friere ich Tabellenzeilen und -spalten mit JavaScript und CSS ein?

So frieren Sie Tabellenzeilen und -spalten mit JavaScript und CSS ein

Das Sperren der ersten Zeile und ersten Spalte einer Tabelle beim Scrollen kann erreicht werden Verwenden von JavaScript und CSS, um die Funktionalität der „Einfrierfenster“ von Excel zu simulieren.

JavaScript-Lösung

Eine JavaScript-Lösung besteht darin, zwei separate Tabellen zu erstellen:

1. Eine feste Kopfzeilentabelle, die die ersten Zeilen- und Spaltenüberschriften enthält.
2. Eine scrollbare Haupttabelle, die die restlichen Tabellendaten enthält.

Beide Tabellen werden mithilfe von CSS absolut positioniert, mit die feste Kopftabelle, die über der Haupttabelle positioniert ist. Wenn die Seite gescrollt wird, bewegt sich die Haupttabelle unabhängig, während die feste Kopfzeile fixiert bleibt.

CSS-Positionierung

<code class="css">/* Fixed header table */
.fixed-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Scrollable body table */
.scrollable-body {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}</code>

JavaScript-Aktivierung

<code class="javascript">// Create a table with the first row as the header
const table = document.createElement('table');
const headerRow = table.createTHead().insertRow();

// Create the first column headings
for (let i = 0; i < numColumns; i++) {
  headerRow.appendChild(document.createElement('th')).innerHTML = 'Heading ' + (i + 1);
}

// Create the body of the table with the remaining data
const body = table.createTBody();
for (let i = 0; i < numRows; i++) {
  const row = body.insertRow();
  for (let j = 0; j < numColumns; j++) {
    row.appendChild(document.createElement('td')).innerHTML = 'Data ' + (i + 1) + ', ' + (j + 1);
  }
}

// Split the table into two: fixed header and scrollable body
const fixedHeader = table.cloneNode(true);
fixedHeader.tBodies[0].remove();

const scrollableBody = table.cloneNode(true);
fixedHeader.tHead.remove();

// Add the two tables to the page
document.body.appendChild(fixedHeader);
document.body.appendChild(scrollableBody);

// Position the tables using CSS
fixedHeader.classList.add('fixed-header');
scrollableBody.classList.add('scrollable-body');</code>

Diese Lösung bietet einen voll funktionsfähigen „Fenster einfrieren“-Effekt für Tabellen und stellt sicher, dass die erste Zeile und Spalte beim Scrollen sichtbar bleiben.

Das obige ist der detaillierte Inhalt vonWie friere ich Tabellenzeilen und -spalten mit JavaScript und CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!