So verbergen Sie Unterzeilen in der JQuery-Tabelle

Bei der Website-Entwicklung sind Tabellen oft eine gängige Form der Datendarstellung. Manchmal müssen wir jedoch Unterzeilen in die Tabelle einbetten, um detaillierte Daten anzuzeigen. Wenn wir zunächst nicht möchten, dass alle Unterzeilen erweitert werden, müssen wir eine Methode implementieren, die die Unterzeilen ausblendet und bei Bedarf anzeigt.

Glücklicherweise bietet jQuery eine sehr praktische Methode, mit der wir diese Funktion erreichen können. Als Nächstes verwenden wir einfachen Code, um eine jQuery-Tabelle zu implementieren, die Unterzeilen ausblenden und anzeigen kann.

HTML erforderlich

In diesem Beispiel verwenden wir eine einfache Tabelle, um einige Daten anzuzeigen. Eine Tabelle besteht aus zwei Hauptteilen: Kopfzeile und Hauptteil. Darunter enthält der Tabellenkörper die Daten, die wir zum Hinzufügen von Unterzeilen benötigen, in denen wir einige neue Zeilen hinzufügen, um detaillierte Daten anzuzeigen.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>bob@example.com</td>
      <td>555-9101</td>
    </tr>
  </tbody>
</table>

Untergeordnete Zeilen ausblenden

Zuerst müssen wir die neue Zeile zum Tabellenkörper hinzufügen. Diese Zeilen fungieren als Unterzeilen und bleiben verborgen, bis der Benutzer auf die Hauptzeile klickt. Wir verwenden den folgenden HTML-Code, um eine neue Zeile hinzuzufügen, um zusätzliche detaillierte Daten anzuzeigen:

<tr class="expandable">
  <td colspan="4">
    <p>
      This is some additional data that will be hidden until the main row is clicked.
    </p>
  </td>
</tr>

Wie Sie sehen können, verwenden wir einen Klassennamen expandable, um anzugeben, dass diese neue Zeile erweiterbar ist, und wir legen fest Die Anzahl der Spalten wird auf 4 erhöht, sodass die Breite der Unterzeile mit der Breite der Hauptzeile übereinstimmt. expandable来表示这个新的行是可伸缩的，同时我们将它的列数设为了4，这样子行的宽度将与主行相同。

然后，我们将这些新的行隐藏起来，这样在页面加载时用户并不会看见它们。我们可以使用以下CSS代码来实现：

tr.expandable {
  display: none;
}

现在，网页加载时我们已经成功的将子行隐藏起来了，接下来我们需要添加一些代码来实现点击主行时显示子行的功能。

显示子行

在这个例子中，我们将通过单击主行来展开子行。此时我们将使用jQuery，利用click()函数监听用户的点击事件，这时就能够实现主行所对应的子行的展开和收起操作。

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    var expandable = $(this).next('.expandable');
    expandable.toggle();
  });
});

我们使用$(document).ready()来确保页面中的所有元素都已经被完全加载，然后对整个表格对象进行了click()事件的监听。在用户点击表格的行时，我们会获取下一行的内容，即我们预先添加的那些可展开子行，并通过jQuery的toggle()

Dann blenden wir diese neuen Zeilen aus, damit der Benutzer sie beim Laden der Seite nicht sieht. Um dies zu erreichen, können wir den folgenden CSS-Code verwenden:

rrreee

Da wir nun die Unterzeilen beim Laden der Webseite erfolgreich ausgeblendet haben, müssen wir etwas Code hinzufügen, um die Unterzeilen anzuzeigen, wenn auf die Hauptzeile geklickt wird.

Unterzeilen anzeigen

In diesem Beispiel erweitern wir die Unterzeilen, indem wir auf die Hauptzeile klicken. An dieser Stelle verwenden wir jQuery und die Funktion click(), um das Klickereignis des Benutzers zu überwachen. Zu diesem Zeitpunkt können wir die der Hauptzeile entsprechenden Unterzeilen erweitern und reduzieren. 🎜rrreee🎜Wir verwenden $(document).ready(), um sicherzustellen, dass alle Elemente auf der Seite vollständig geladen wurden, und click() dann das gesamte Tabellenobjektereignis Überwachung. Wenn der Benutzer auf eine Zeile der Tabelle klickt, erhalten wir den Inhalt der nächsten Zeile, dh die erweiterbaren Unterzeilen, die wir zuvor hinzugefügt haben, und erweitern oder reduzieren sie über den toggle()von jQuery > Funktion. 🎜🎜Mit dem obigen Code können wir die Funktion zum Erweitern von Unterzeilen realisieren. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir gezeigt, wie man jQuery verwendet, um Unterzeilen in der Tabelle zu implementieren und Operationen zu erweitern und zu reduzieren. Durch das Hinzufügen von dynamischem HTML- und CSS-Code können wir die Unterzeilen erfolgreich ausblenden und anzeigen, wenn der Benutzer auf die Hauptzeile klickt. Diese einfachen Schritte lassen sich problemlos auf die Entwicklung jedes Website-Formulars anwenden und sorgen so für ein besseres Benutzererlebnis auf Ihrer Website. 🎜

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Unterzeilen in der JQuery-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!