Modifier les couleurs d'arrière-plan de la ligne de table à l'aide de javascript

Les plats clés

• JavaScript peut être utilisé pour modifier dynamiquement les couleurs d'arrière-plan de la ligne de table, améliorant la lisibilité sans avoir besoin de coder hard à chaque deuxième ligne ou régénérer la page HTML à partir d'une application de serveur.
• Une méthode consiste à définir deux classes pour les couleurs d'arrière-plan dans un élément de style, puis à utiliser JavaScript pour attribuer ces classes à des lignes étranges et même respectivement.
• Une méthode plus complexe permet de plusieurs couleurs alternées en utilisant un tableau qui contient toutes ces couleurs et les affectant aux lignes en fonction de leur index.
• Une méthode finale calcule la couleur en fonction du nombre de lignes dans le tableau, de la couleur de démarrage et d'un facteur donné, créant un effet de gradient. Cette méthode nécessite une considération attentive des combinaisons de couleurs pour maintenir la lisibilité.

De nombreux sites qui présentent des données tabulaires utilisent des couleurs d'arrière-plan alternées pour augmenter la lisibilité de ces données. Et comme j'ai développé un site, j'ai réalisé que je voulais aussi le faire. Le problème? Dans mon cas, le tableau n'a pas été généré par une application ou un script côté serveur dont vous pouvez trouver de nombreux exemples sur le Web.

La solution évidente était de coder hard-code chaque deuxième rangée pour s'assurer qu'il avait une couleur d'arrière-plan différente. Mais je voulais que la table soit dynamique, de sorte qu'il était possible d'ajouter une nouvelle ligne au milieu de la table sans modifier l'attribut de couleur d'arrière-plan des lignes qui ont suivi.

Ma solution utilise JavaScript, car CSS3 n'est pas encore vraiment une option viable. Aujourd'hui, les navigateurs ont encore du mal à soutenir CSS1 et CSS2. Même si les tables HTML ne sont pas recommandées pour la disposition des pages Web, elles sont toujours parfaitement adaptées à la présentation des données tabulaires. Dans ce tutoriel, je présenterai trois exemples basés sur la même idée. J'ai testé les solutions dans IE6, Firefox 1.0, Mozilla 1.7.3 et Opera 7.54 sur la plate-forme Windows uniquement.

Pour commencer

Commençons par une table HTML ordinaire. La question de savoir si le tableau contient des éléments de la tête / des pieds n'a pas d'importance dans ce cas:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Maintenant, nous devons vérifier que le navigateur est assez nouveau et a les capacités JavaScript nécessaires (c'est-à-dire la prise en charge DOM W3C). La ligne suivante effectue ce chèque, disqualifiant Netscape 4 et d'autres de cette génération. Ces navigateurs ne feront aucune tentative de colorier la table.

if(document.getElementById)

Notez également que commun à tous ces exemples est ce code:

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i < rows.length; i++){           <br>
    //manipulate rows <br>
      ...

Exemple 1

Ce premier exemple utilise un élément de style à travers lequel nous avons défini deux classes pour les couleurs d'arrière-plan:

<style> <br>
  .odd{background-color: white;} <br>
  .even{background-color: gray;} <br>
</style>

Le style est flexible: il pourrait tout aussi bien définir autre chose, tel que chaque deuxième rangée devrait s'afficher en italique. La fonction complète ressemble à ceci:

function alternate(id){ <br>
  if(document.getElementsByTagName){  <br>
    var table = document.getElementById(id);   <br>
    var rows = table.getElementsByTagName("tr");   <br>
    for(i = 0; i < rows.length; i++){           <br>
  //manipulate rows <br>
      if(i % 2 == 0){ <br>
        rows[i].className = "even"; <br>
      }else{ <br>
        rows[i].className = "odd"; <br>
      }       <br>
    } <br>
  } <br>
}

Ici,%, l'opérateur de modulo, nous donne le reste de la division.

La fonction ci-dessus doit être appelée à partir de l'événement Onload de la balise corporelle:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Le résultat pourrait ressembler à ceci:

Exemple 2

passons à l'exemple suivant - quelque chose d'un peu plus aventureux. Au lieu d'utiliser seulement deux couleurs alternées, je veux en utiliser plusieurs. Ajoutons un tableau qui contient toutes ces couleurs.

Étant donné qu'un nombre limité de couleurs a un nom défini en HTML, nous passerons aux valeurs hexadécimales. Les couleurs résultantes seront constituées de trois valeurs: rouge, vert et bleu. Le blanc est réalisé lorsque les trois couleurs sont activées sur Max: #FFFFFF. L'opposé, noir, est # 000000.

if(document.getElementById)

Le code manipulant la ligne ne comprendra qu'une seule ligne, mais au lieu de copier et de coller le même code, nous passerons un appel de fonction distinct:

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i < rows.length; i++){           <br>
    //manipulate rows <br>
      ...

Ici, j'ai également ajouté une fonction par exemple 1 appelé doalternate. Cela facilite la commutation entre les différentes méthodes par lesquelles nous pouvons alterner les couleurs de ligne de la table.

Comme on le voit dans les fragments ci-dessus, il est possible de définir pour les lignes le nom de la classe CSS, ou un attribut spécifique d'une balise HTML:

<style> <br>
  .odd{background-color: white;} <br>
  .even{background-color: gray;} <br>
</style>

Le résultat de l'exemple 2 peut apparaître comme indiqué ci-dessous:

Exemple 3

l'exemple final montre une variante vraiment colorée dans laquelle la couleur est calculée en fonction du nombre de lignes dans le tableau, de la couleur de démarrage et d'un facteur donné.

Tout d'abord, nous devons définir quelques variables:

function alternate(id){ <br>
  if(document.getElementsByTagName){  <br>
    var table = document.getElementById(id);   <br>
    var rows = table.getElementsByTagName("tr");   <br>
    for(i = 0; i < rows.length; i++){           <br>
  //manipulate rows <br>
      if(i % 2 == 0){ <br>
        rows[i].className = "even"; <br>
      }else{ <br>
        rows[i].className = "odd"; <br>
      }       <br>
    } <br>
  } <br>
}

Nous ajoutons maintenant une nouvelle fonction, Dogradient.

<html> <br>
... <br>
<body onload="alternate('thetable')"> <br>
<table > <br>
<tr><td>...</td></tr> <br>
</table> <br>
...

Étant donné que les couleurs sont calculées, nous devons nous assurer que nous ne sortons pas de la plage, les valeurs valides sont de 0 à 255. L'argument de couleur n'est pas séparé en valeurs RVB, nous devons donc remplir si nous allons en dessous de 16, sinon, la valeur sera illégale. Si nous avons une très longue table ou une valeur de grandes étapes, le gradient tournera dans l'autre sens. Dans cette fonction, la partie bleue est fixe et les deux autres sont modifiées.

La méthode de tostring est assez pratique lorsque vous devez convertir les nombres - décimal en hexadécimal, dans ce cas. L'argument dans Tostring est le radix, c'est-à-dire. 2 pour binaire, 10 pour décimal et 16 pour Hex. L'image ci-dessous montre comment le tableau apparaît dans les résultats dans Firefox 1.0, IE6, Mozilla 1.7 et Opera 7.5.

Veillez à ne pas rendre l'affichage trop coloré - nous voulons toujours assurer la lisibilité de nos données tabulaires. Avec certaines combinaisons de couleurs, il pourrait même être nécessaire de modifier la couleur du texte de la table en utilisant quelque chose comme ceci:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Conclusion

En utilisant CSS et JavaScript, il est assez facile d'ajouter ou d'augmenter la lisibilité de notre code sans avoir à régénérer la page HTML à partir d'une application de serveur. Comme nous l'avons vu ici, il peut également être ajouté sur des pages HTML statiques. Pour voir ces exemples en action, téléchargez le fichier html contenant le code.

Questions fréquemment posées (FAQ) sur la modification des couleurs d'arrière-plan en javascript

Comment puis-je modifier la couleur d'arrière-plan d'une ligne spécifique dans un tableau à l'aide de JavaScript?

Pour modifier la couleur d'arrière-plan d'une ligne spécifique dans une table, vous pouvez utiliser la méthode JavaScript GetElementById ou QuerySelector pour sélectionner la ligne, puis modifier sa propriété de style. Voici un exemple:

document.getElementById ("myrow"). Style.backgroundcolor = "red";
// ou
document.QuerySelector ("# myrow"). Style.backgroundColor = "Red";
Dans cet exemple, "myRow" est l'ID de la ligne que vous voulez changer. Vous pouvez remplacer «rouge» par n'importe quel nom de couleur ou code couleur valide.

Puis-je modifier la couleur d'arrière-plan de plusieurs lignes à la fois?

Oui, vous pouvez modifier la couleur d'arrière-plan de plusieurs lignes à la fois en utilisant JavaScript. Vous pouvez utiliser la méthode QueySelectorall pour sélectionner toutes les lignes que vous souhaitez modifier, puis utiliser une boucle pour modifier la couleur d'arrière-plan de chaque ligne. Voici un exemple:

var Rows = document.QuerySelectorAll (". Myrows");
pour (var i = 0; i [i] .Style.backgroundColor = "Blue";
}
Dans cet exemple, "MyRows" est la classe que vous voulez changer. Vous pouvez remplacer «bleu» par n'importe quel nom de couleur ou code couleur valide.

Comment puis-je modifier la couleur d'arrière-plan d'une ligne lorsque je clique dessus?

Pour modifier la couleur d'arrière-plan d'une ligne lorsque vous cliquez dessus, vous pouvez utiliser l'événement OnClick en JavaScript. Voici un exemple:

document.getElementById ("myrow"). Onclick = function () {
this.style.backgroundcolor = "green";
}
Dans cet exemple, "myrow" est l'ID de la ligne que vous souhaitez modifier. Vous pouvez remplacer «vert» par n'importe quel nom de couleur ou code couleur valide.

Puis-je modifier la couleur d'arrière-plan d'une ligne en fonction de son contenu?

Oui, vous pouvez modifier la couleur d'arrière-plan d'une ligne en fonction de son contenu à l'aide de JavaScript. Vous pouvez utiliser la propriété InnerHTML pour obtenir le contenu de la ligne, puis utiliser une instruction IF pour modifier la couleur d'arrière-plan en fonction du contenu. Voici un exemple:

var row = document.getElementById ("myrow");
if (row.innerhtml.includes ("important")) {
row.style.backgroundColor = "Yellow";
}
dans cet exemple, "MyRow" est l'identifiant de la ligne que vous voulez changer, " pour. Vous pouvez remplacer «jaune» par n'importe quel nom de couleur ou code couleur valide.

Comment puis-je modifier la couleur d'arrière-plan d'une ligne lorsque je le survrai?

Pour modifier la couleur d'arrière-plan d'une ligne lorsque vous en survolez, vous pouvez utiliser le: en survol de la pseudo-classe dans CSS. Voici un exemple:

#myrow: Hover {
background-Color: Pink;
}
Dans cet exemple, "MyRow" est l'ID de la ligne que vous souhaitez changer. Vous pouvez remplacer «Pink» par n'importe quel nom de couleur ou code couleur valide.

Puis-je modifier la couleur d'arrière-plan d'une ligne vers sa couleur d'origine?

Oui, vous pouvez modifier la couleur d'arrière-plan d'une ligne vers sa couleur d'origine à l'aide de JavaScript. Vous pouvez stocker la couleur d'origine dans une variable avant de la modifier, puis utiliser cette variable pour modifier la couleur. Voici un exemple:

var row = document.getElementByid ("myrow");
var originalColor = row.style.backgroundcolor;
row.style.backgroundcolor = "violet";
// pour modifier la couleur arrière:
row.style.backgroundColor = originalColor; «MyRow» est l'ID de la ligne que vous voulez changer. Vous pouvez remplacer «Purple» par n'importe quel nom de couleur ou code couleur valide.

Comment puis-je modifier la couleur d'arrière-plan d'une ligne toutes les quelques secondes?

pour modifier la couleur d'arrière-plan d'une ligne toutes les quelques secondes, vous pouvez utiliser la fonction SetInterval en JavaScript. Voici un exemple:

var row = document.getElementById ("myrow");
setInterval (function () {
row.style.backgroundcolor = getrandomcolor ();
}, 2000);
Dans cet exemple, "myrow" est un id de la row que vous voulez changer, et getRandom est un id de la row que vous voulez changer, et getrand, c'est un id de la row que vous voulez changer, et getRandom est un id de la Row que vous voulez changer, et getrand et getrandom est un id de la row que vous voulez changer, et Getrand et Getrando Renvoie une couleur aléatoire. Le nombre 2000 est l'intervalle en millisecondes (2000 millisecondes = 2 secondes).

Puis-je modifier la couleur d'arrière-plan d'une ligne en fonction d'une condition?

Oui, vous pouvez modifier la couleur d'arrière-plan d'une ligne en fonction d'une condition à l'aide de javascript. Vous pouvez utiliser une instruction IF pour vérifier la condition, puis modifier la couleur d'arrière-plan si la condition est vraie. Voici un exemple:

var row = document.getElementById ("myrow");
if (somecondition) {
row.style.backgroundcolor = "orange";
}
Dans cet exemple, "myrow" est l'identification de la ligne que vous voulez changer, et une fois la condition que la condition que vous souhaitez vérifier. Vous pouvez remplacer «Orange» par n'importe quel nom de couleur ou code de couleur valide.

Comment puis-je modifier la couleur d'arrière-plan d'une ligne lorsque je la sélectionne?

Pour modifier la couleur d'arrière-plan d'une ligne lorsque vous la sélectionnez, vous pouvez utiliser l'événement OnSelect en Javascript. Cependant, cet événement n'est pas couramment utilisé pour les lignes de table, car elle est généralement utilisée pour les champs d'entrée de texte. Une approche plus courante consiste à modifier la couleur d'arrière-plan lorsque vous cliquez sur la ligne, comme expliqué dans la question 3.

Puis-je modifier la couleur d'arrière-plan d'une ligne dans une colonne spécifique?

Oui, vous pouvez modifier la couleur d'arrière-plan d'une ligne dans une colonne spécifique à l'aide de JavaScript. Vous pouvez utiliser la propriété CellIndex pour obtenir l'index de la colonne, puis modifier la couleur d'arrière-plan de la ligne si l'index correspond à la colonne spécifique. Voici un exemple:

var row = document.getElementById ("myrow");
if (row.cells [0] .celLindex == SpécificColumn) {
row.style.backgroundColor = "Teal";
}
Dans cet exemple, "MyRow" est l'indice de la ligne pour vous de la colonne spécifique. Vous pouvez remplacer «Teal» par n'importe quel nom de couleur ou code couleur valide.

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!