tableau HTML masqué

Le masquage de tableaux HTML est une technique très courante qui peut rendre les pages Web plus concises, plus belles et plus faciles à lire. Les tableaux sont l'un des éléments les plus couramment utilisés dans la conception Web et peuvent être utilisés pour afficher diverses données et informations. Cependant, les tableaux sont parfois trop longs ou trop complexes, ce qui rend la page encombrée. À ce stade, vous devez utiliser le masquage. fonction des tableaux.

Le masquage de tableau peut rendre la page Web plus concise et claire, et les utilisateurs peuvent afficher ou masquer le contenu selon leurs besoins. Dans la conception Web, JavaScript est généralement utilisé pour masquer le contenu des tableaux, ce qui est réalisé en ajoutant des écouteurs d'événements. Voici les étapes spécifiques :

1. Dans le fichier HTML, recherchez le tableau qui doit être masqué. Vous pouvez définir l'attribut ID ou l'attribut de classe de la table pour faciliter les opérations ultérieures.
2. Dans le fichier JavaScript, obtenez la table qui doit être masquée via la méthode getElementById() ou getElementsByClassName().
3. Ajoutez un événement de clic au tableau. Lorsque l'utilisateur clique sur le tableau, cet événement sera déclenché. Dans le gestionnaire d'événements, utilisez la propriété style.display pour contrôler l'affichage et le masquage du tableau. Si vous souhaitez masquer le tableau, vous pouvez définir la propriété style.display sur "aucun". Si vous souhaitez afficher le tableau, vous pouvez définir la propriété style.display sur "table" ou sur d'autres valeurs.

Ce qui suit est un exemple simple :

Code HTML :

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>22</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>30</td>
    <td>男</td>
  </tr>
</table>

<button id="hideTable">隐藏表格</button>
<button id="showTable">显示表格</button>

Code JavaScript :

var table = document.getElementById("myTable");
var hideButton = document.getElementById("hideTable");
var showButton = document.getElementById("showTable");

hideButton.addEventListener("click", function() {
  table.style.display = "none";
});

showButton.addEventListener("click", function() {
  table.style.display = "table";
});

Dans l'exemple ci-dessus, nous avons obtenu respectivement les éléments DOM du tableau et deux boutons, puis avons ajouté l'événement Click. Lorsque l'utilisateur clique sur le bouton Masquer, le gestionnaire d'événements est déclenché et la propriété style.display de la table est définie sur « aucun », masquant ainsi la table. Lorsque l'utilisateur clique sur le bouton d'affichage, un autre gestionnaire d'événements est déclenché pour définir la propriété style.display du tableau sur "table" pour afficher le tableau.

En plus d'utiliser JavaScript pour masquer le tableau, vous pouvez également utiliser CSS pour y parvenir. Il existe un attribut d'affichage en CSS qui peut être utilisé pour contrôler l'affichage et le masquage des éléments. Nous pouvons ajouter les styles suivants au fichier CSS :

table.hidden {
  display: none;
}

Ensuite, dans le code HTML, ajoutez quelques noms de classes au tableau :

<table class="myTable hidden">
  <!-- 表格内容 -->
</table>

Ici, nous avons ajouté deux noms de classes au tableau, l'un est "myTable" et l'autre est "caché". Le nom de classe « myTable » est utilisé pour le contrôle de style et le nom de classe « caché » est utilisé pour masquer la table. Lorsque nous devons masquer la table, il suffit de supprimer le nom de classe "caché" de la table pour afficher la table :

var table = document.querySelector(".myTable");
table.classList.remove("hidden");

De cette façon, masquer la table via CSS peut être plus flexible et plus pratique. Il suffit d'ajouter ou de supprimer le nom de la classe dans le code HTML pour afficher et masquer le tableau sans écrire beaucoup de code JavaScript.

Dans la conception de sites Web, cacher des tableaux est une compétence très importante. Il peut rendre les pages Web plus concises, plus belles et plus faciles à lire, et améliorer l'expérience et la satisfaction des utilisateurs. Qu'elle soit implémentée via JavaScript ou CSS, nous pouvons utiliser de manière flexible les techniques de masquage de tableaux en fonction des besoins pour créer une conception Web de meilleure qualité.

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!