jquery définit la couleur td

Lors du développement de la page, nous devrons peut-être marquer certaines cellules du tableau avec des couleurs spéciales pour afficher des informations ou un statut spécifiques. À l'aide de jQuery, vous pouvez facilement définir dynamiquement la couleur d'arrière-plan, la couleur de la police et d'autres styles du TD dans le tableau.

1. Utilisez jQuery pour changer la couleur des cellules

Dans jQuery, nous pouvons utiliser des méthodes CSS pour modifier dynamiquement le style des cellules (TD), tel que la couleur, la hauteur, la largeur, etc. Parmi eux, le code pour changer la couleur d'arrière-plan de la cellule est le suivant :

$("td").css("background-color", "red");

Dans cet exemple, nous sélectionnons d'abord tous les éléments TD, puis utilisons la méthode css() pour modifier la valeur de leur attribut de couleur d'arrière-plan, comme montré dans la figure :

De même, nous pouvons également utiliser la syntaxe CSS pour localiser et modifier le style des éléments TD spécifiés. Par exemple, si nous devons changer la couleur de fond des cellules de la deuxième ligne et de la troisième colonne, nous pouvons écrire :

$("table tr:eq(1) td:eq(2)").css("background-color", "blue");

Dans cet exemple, nous sélectionnons d'abord l'élément <tr>元素，然后选择其中第三个<code><td> dans la deuxième ligne, et enfin changeons sa couleur de fond valeur d'attribut. <p>2. Utilisez jQuery pour changer la couleur des cellules en fonction des conditions</p> <p>En plus de modifier directement les styles de cellules, nous pouvons également modifier dynamiquement le style de cellules spécifiques en fonction des conditions. En continuant avec l'exemple ci-dessus, nous souhaitons changer la couleur d'une cellule en fonction de la taille du nombre qu'elle contient. </p> <p>Tout d'abord, nous devons parcourir les cellules du tableau, puis utiliser des instructions de jugement pour déterminer les valeurs dans les cellules. Si le nombre dans la cellule est supérieur à 5, changez sa couleur d'arrière-plan en vert, sinon en rouge. Le code est implémenté comme suit : </p><pre class='brush:php;toolbar:false;'>$(&quot;table tr&quot;).each(function(){ $(this).find('td').each(function(){ if(parseInt($(this).text()) &gt; 5){ $(this).css(&quot;background-color&quot;, &quot;green&quot;); }else{ $(this).css(&quot;background-color&quot;, &quot;red&quot;); } }); });</pre><p>Dans cet exemple, nous utilisons la méthode each() pour parcourir chaque ligne du tableau, puis utilisons la méthode find() pour parcourir les cellules de chaque ligne. Utilisez la méthode text() pour récupérer le contenu de la cellule, puis comparez la taille des nombres et modifiez la valeur de l'attribut de couleur d'arrière-plan. </p> <p>3. Plus de paramètres de style de cellule</p> <p>En plus de la couleur d'arrière-plan, nous pouvons également modifier dynamiquement la plupart des attributs du style de cellule via les méthodes CSS : </p><pre class='brush:php;toolbar:false;'>$(selector).css(&quot;propertyName&quot;, &quot;value&quot;);</pre><p>Par exemple : </p> <p>1. </p><pre class='brush:php;toolbar:false;'>$(&quot;table td&quot;).css({&quot;font-size&quot;:&quot;18px&quot;, &quot;color&quot;:&quot;#333&quot;});</pre><p>2. Changer le style et la couleur de la bordure des cellules : </p><pre class='brush:php;toolbar:false;'>$(&quot;table td&quot;).css({&quot;border-style&quot;:&quot;solid&quot;, &quot;border-width&quot;:&quot;2px&quot;, &quot;border-color&quot;:&quot;#ccc&quot;});</pre><p>En plus des méthodes CSS, jQuery fournit également d'autres méthodes pour définir les styles de cellules, telles que les méthodes addClass() et removeClass(), qui peuvent ajouter et supprimer des styles de classe. respectivement. Ces méthodes peuvent être combinées de manière plus flexible pour obtenir divers effets de définition de style de cellule. </p> <p>Résumé : </p> <p>jQuery fournit une méthode de définition de style de cellule (TD) extrêmement pratique, qui peut grandement simplifier notre balisage spécifique des données de table. En définissant dynamiquement les styles de cellule, nous pouvons rapidement optimiser l'effet d'affichage de la page et améliorer l'expérience interactive de l'utilisateur. </p> </td>

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!