Comment masquer les sous-lignes dans la table jquery

Dans le développement de sites Web, les tableaux sont souvent une forme courante d'affichage de données. Cependant, nous devons parfois intégrer des sous-lignes dans le tableau pour afficher des données détaillées. Si nous ne voulons pas que toutes ces sous-lignes soient développées initialement, nous devons alors implémenter une méthode qui masque les sous-lignes et les affiche en cas de besoin.

Heureusement, jQuery fournit une méthode très pratique pour nous aider à réaliser cette fonction. Ensuite, nous utiliserons un code simple pour implémenter une table jQuery capable de masquer et d'afficher des sous-lignes.

HTML requis

Dans cet exemple, nous utiliserons un simple tableau pour afficher certaines données. Un tableau se compose de deux parties principales : l’en-tête et le corps. Parmi eux, la partie corps du tableau contient les données dont nous avons besoin pour ajouter des sous-lignes, dans lesquelles nous ajouterons de nouvelles lignes pour afficher des données détaillées.

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

Masquer les lignes enfants

Tout d'abord, nous devons ajouter la nouvelle ligne au corps de la table. Ces lignes agiront comme des sous-lignes, masquées jusqu'à ce que l'utilisateur clique sur la ligne principale. Nous utilisons le code HTML suivant pour ajouter une nouvelle ligne afin d'afficher des données détaillées supplémentaires :

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

Comme vous pouvez le voir, nous utilisons un nom de classe expandable pour indiquer que cette nouvelle ligne est extensible , et nous définissons son nombre de colonnes à 4, de sorte que la largeur de la sous-ligne soit la même que celle de la ligne principale. 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()

Ensuite, nous masquons ces nouvelles lignes afin que l'utilisateur ne les voie pas lors du chargement de la page. Nous pouvons utiliser le code CSS suivant pour y parvenir :

rrreee

Maintenant que nous avons réussi à masquer les sous-lignes lorsque la page Web est chargée, nous devons ajouter du code pour afficher les sous-lignes lorsque l'on clique sur la ligne principale.

Afficher les sous-lignes

Dans cet exemple, nous allons développer les sous-lignes en cliquant sur la ligne principale. À ce stade, nous utiliserons jQuery et utiliserons la fonction click() pour surveiller l'événement de clic de l'utilisateur. À ce stade, nous pouvons développer et réduire les sous-lignes correspondant à la ligne principale. 🎜rrreee🎜Nous utilisons $(document).ready() pour nous assurer que tous les éléments de la page ont été entièrement chargés, puis cliquez() sur l'intégralité de l'objet table. surveillance. Lorsque l'utilisateur clique sur une ligne du tableau, nous obtiendrons le contenu de la ligne suivante, c'est-à-dire les sous-lignes extensibles que nous avons ajoutées à l'avance, et les développerons ou les réduirons via toggle()de jQuery. > fonction. 🎜🎜Avec le code ci-dessus, nous pouvons réaliser la fonction d'expansion des sous-lignes. 🎜🎜Résumé🎜🎜Dans cet article, nous avons montré comment utiliser jQuery pour implémenter des sous-lignes dans le tableau et effectuer des opérations d'expansion et de réduction. En ajoutant du code HTML et CSS dynamique, nous réussissons à masquer les sous-lignes et à les afficher lorsque l'utilisateur clique sur la ligne principale. Ces étapes simples peuvent être facilement appliquées au développement de n’importe quel formulaire de site Web, apportant une meilleure expérience utilisateur à votre site Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!