Modifier la couleur d'une ligne d'un tableau HTML selon la valeur d'une cellule

**leau2001** · 18/12/2009, 16h52

Bonjour,

J'ai un tableau :
1 5 20
5 12 1
17 12 11

J'aimerai que la ligne du tableau dont la valeur de la colonne 3 est superieur à 10 se mette en rouge. Dans mon exemple la ligne 1 et 3

Je sais qu'il faut que j'utilise du javascript, pourquoi pas jquery, mais je n'y connais rien du tout... un petit coup de pouce pour me lancer ne me ferai pas de mal... merci à ceux qui savent

lo

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<table id="montableau">
<tr>
<td>1</td>
<td>5</td>
<td>20</td>
</tr>
<tr>
<td>5</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>17</td>
<td>12</td>
<td>5></td>
</tr>
</table>

**emmanuel.remy** · 18/12/2009, 20h43

Salut,

Vite fait devant la télé... Donc à revoir et certainement à adapter. J'ai commenté le code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <script type="text/javascript">
    /**
     * id : le nom de l'élément
     * nuCol: le numéro de la colonne (base 1)
     * vMax: la valeur max à chercher
     * couleur: la couleur de fond à mettre     
     */                   
    function doCouleur(id,numCol,vMax, couleur) {
      //on récupère la table utilisée
      var table = document.getElementById(id);
      //pour chaque ligne...
      for (i=0;i<table.rows.length;i++) {
        //la cellule de la colonne n° numCol 
        var cell = table.rows[i].cells[numCol-1] ;
        //... sa valeur (à adapter si la structure du html change)
        if (parseFloat(cell.innerHTML) > vMax) {
          //si ok, nouvelle couleur de fond
          table.rows[i].style.backgroundColor = couleur;
        }
      }
 
    }
  </script>
 
  </head>
  <body>
  <button onclick="doCouleur('montableau',3,10,'red');">go</button>
           <table id="montableau">
            <tr>
            <td>1</td>
            <td>5</td>
            <td>20</td>
            </tr>
            <tr>
            <td>5</td>
            <td>12</td>
            <td>1</td>
            </tr>
            <tr>
            <td>17</td>
            <td>12</td>
            <td>11</td>
            </tr>
            </table>
  </body>
</html>

ERE

Modifier la couleur d'une ligne d'un tableau HTML selon la valeur d'une cellule

JavaScript

Discussions similaires

Partager

Partager