tableau caché HTML

Tableau caché HTML

Dans la conception Web, les tableaux sont une méthode de mise en page courante. Mais dans certains cas, nous devrons peut-être masquer le tableau et ne l’afficher qu’en cas de besoin. Cet article explique comment masquer les tableaux en HTML.

1. Masquer les tableaux via CSS

CSS est le langage standard pour contrôler les styles dans les pages Web Nous pouvons utiliser CSS pour contrôler la visibilité des tableaux. Voici quelques codes CSS pour masquer les tableaux :

1. display: none;

C'est le moyen le plus couramment utilisé pour masquer des éléments en CSS. Définissez l'attribut "display" de l'élément sur "aucun" pour masquer complètement l'élément. Nous pouvons appliquer ce style à l'élément table pour masquer le tableau.

Par exemple :

<table style="display: none;">
  <tr>
    <td>隐藏表格</td>
  </tr>
</table>

2. visibilité : cachée ;

Cette méthode est similaire à display : none mais ; différent Le problème est que l'élément occupe toujours de l'espace, il est juste invisible. Si vous devez réafficher le tableau dans certaines circonstances, vous pouvez définir la propriété de visibilité sur « visible ».

Par exemple :

<table style="visibility: hidden;">
  <tr>
    <td>隐藏表格</td>
  </tr>
</table>

2. Utilisez JavaScript pour masquer dynamiquement le tableau

En plus du CSS, nous pouvons également utiliser JavaScript pour masquer dynamiquement le tableau. Cette méthode nous permet de contrôler de manière plus flexible le masquage et l'affichage des tableaux.

1. Utilisation de l'attribut style.display

En JavaScript, vous pouvez utiliser l'attribut style.display d'un élément DOM pour contrôler la visibilité de l'élément. Si nous voulons qu'une table soit masquée au chargement de la page, nous pouvons ajouter le code suivant dans la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a de la page :

document.getElementById("tableId").style.display = "none";

où tableId est l'ID de la table qui doit se cacher.

Si vous devez réafficher le tableau, vous pouvez définir style.display sur "" ou "block".

Par exemple :

document.getElementById("tableId").style.display = ""; // or "block"

2. Utiliser l'attribut classList

En plus de l'attribut style.display, nous pouvons utilisez également la propriété classList pour contrôler la classe CSS d'un élément. En ajoutant une classe CSS spécifique au tableau, nous pouvons contrôler dynamiquement la visibilité du tableau en cas de besoin.

Ce qui suit est du code JavaScript pour implémenter le masquage de table :

// 隐藏表格
document.getElementById("tableId").classList.add("hidden");

// 显示表格
document.getElementById("tableId").classList.remove("hidden");

Parmi eux, Hidden est notre classe CSS personnalisée, et le style de cette classe peut être défini en CSS : #🎜 🎜#

.hidden {
  display: none;
}

De cette façon, vous pouvez éviter d'écrire des valeurs de style spécifiques​​dans le code JavaScript, ce qui rend le code plus modulaire et plus facile à maintenir.

3. Résumé

Masquer le tableau via CSS ou JavaScript, ce qui nous permet de contrôler la mise en page de la page de manière plus flexible. Cette méthode convient à certains scénarios nécessitant un affichage dynamique du contenu, tels que des boutons radio, des listes déroulantes et d'autres contrôles interactifs. Cependant, il convient de noter que lorsque vous masquez le tableau, vous devez essayer d'éviter d'affecter l'accessibilité et le référencement de la page.

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!