JavaScript-Tabellen-Scroll

1. Verwendung der Eigenschaft overflow in JavaScript zum Scrollen der Tabelle
2. Verwenden Sie overflowX und overflowY in JavaScript, um durch die Tabelle zu scrollen

Für die Webentwicklung und die Nutzung der Bereiche einer Webseite können scrollbare Inhalte oder div oder table aktiv beitragen. Ein scrollbarer Abschnitt kann leicht einen großen Zeilenhaufen einsparen und die Webseite neu gestalten.

Unsere Beispielsätze demonstrieren die Verwendung der Eigenschaften overflow: "auto" und overflowX, overflowY. Diese Eigenschaften erfordern weniger Codezeilen, um bildlauffähige Tabelleninhalte zu implementieren.

Verwendung der Eigenschaft overflow in JavaScript zum Scrollen der Tabelle

Die Grundstruktur für die Tabelle ergibt eine grosse Liste von Daten. Wir werden eine scrollbare Tabelle initiieren, um den Platz zu minimieren und Seitenbereiche zu nutzen.

Wir werden die Instanz-Eigenschaft tbody overflow auf auto setzen. Es öffnet sich automatisch ein Navigator, der sich vertikal und horizontal bewegt.

Code - HTML-Datei:

<table id="myTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody id="bd">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Code - CSS-Datei:

thead,
tbody {
  display: block;
}

tbody {
  max-height: 100px;
  width: 200px;
}

Code - JavaScript-Datei:

document.getElementById('bd').style.overflow = 'auto';

Ausgabe:

Verwenden Sie overflowX und overflowY in JavaScript, um durch die Tabelle zu scrollen

Dieses Beispiel impliziert eine fast ähnliche Art und Weise, die Aufgabe auszuführen, eine scrollbare Tabelle zu erstellen. Der Unterschied besteht darin, dass wir die Achsennavigation explizit definieren.

Wir setzen overflowX auf none und overflowY auf auto.

Code - HTML-Datei:

<table id="myTable">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody id="bd">
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Code - CSS-Datei:

thead,
tbody {
  display: block;
}

tbody {
  max-height: 100px;
  width: 200px;
}

Code - JavaScript-Datei:

document.getElementById('bd').style.overflowX = 'none';
document.getElementById('bd').style.overflowX = 'auto';

Ausgabe: