Surligner la valeur maximale dans un tableau

**mitchreward** · 14/12/2012, 10h53

Salut la communauté,

Je développe une API en PHP, qui me retourne (entre autre), un tableau html comme suivant :

Je ne connais pas le JS, enfin, très peu ..

Ce que je voulais faire est je pense assez simple:

Pour CHAQUE LIGNE de mon tableau je voulais surligner la plus grande valeur en rouge par exemple .

Je pense que ça doit être réalisable asset facilement, avec peut etre la fonction math.max

Mais comme je ne connais pas du tout, j'aurais aimé un petit coup de main ..

Merci d'avance

**SpaceFrog** · 14/12/2012, 11h06

Va falloir préciser la demande ..;
tableau = ??? balise table html ???

si oui en deux lignes de jquery c'est réglé ...

**DrDarko** · 14/12/2012, 11h38

Envoyé par SpaceFrog

si oui en deux lignes de jquery c'est réglé ...

T'es un peu optimiste...

Après ça reste très très simple de comparer les valeurs dans tes lignes puis de changer le background de la case qui a la valeur la plus élevée.

**mitchreward** · 14/12/2012, 11h44

oui c'est un boucle while en php qui fait une balise <table> html

**SpaceFrog** · 14/12/2012, 11h53

Optimiste ??
non je donne d'abord la version js pur ...
un peu plus longue et je prépare la version jquery en deux lignes

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
51
52
53
54
 
<script type="text/javascript">
function init(){
lignes = document.getElementById('foo').getElementsByTagName('tr');
tabval= new Array();
ll=lignes.length;
for (ligne=0; ligne<ll;ligne++){ 
   cellules=lignes[ligne].getElementsByTagName('td');
   cl=cellules.length
   tabval[ligne]=new Array();
   for(i=0;i<cl;i++){
      tabval[ligne].push(cellules[i].innerHTML*1);
   }
   tabval[ligne]=tabval[ligne].sort().reverse();
   tabval[ligne]=tabval[ligne][0];
   for(i=0;i<cl;i++){
   		if(cellules[i].innerHTML*1==tabval[ligne]){
   			cellules[i].style.backgroundColor="yellow";
   		}
	}
 
}
}
 
</script>
</head>
 
<body onload="init()">
<table id="foo">
	<tr>
		<td>2</td>
		<td>5</td>
		<td>8</td>
		<td>9</td>
	</tr>	
	<tr>
		<td>2</td>
		<td>5</td>
		<td>8</td>
		<td>7</td>
	</tr>
	<tr>
		<td>3</td>
		<td>9</td>
		<td>5</td>
		<td>4</td>
	</tr>
	<tr>
		<td>9</td>
		<td>5</td>
		<td>7</td>
		<td>3</td>
	</tr>
</table>

**SpaceFrog** · 14/12/2012, 12h16

La version JQUERY

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
<table id="foo">
    <tr>
        <td>2</td>
        <td>5</td>
        <td>8</td>
        <td>9</td>
    </tr>    
    <tr>
        <td>2</td>
        <td>5</td>
        <td>8</td>
        <td>7</td>
    </tr>
    <tr>
        <td>3</td>
        <td>9</td>
        <td>5</td>
        <td>4</td>
    </tr>
    <tr>
        <td>9</td>
        <td>5</td>
        <td>7</td>
        <td>3</td>
    </tr>
</table>

Code :

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

1
2
$('tr').each(function() {var lignes = $(this).children('td'),max = null, maxIndex = null;
 lignes.each(function() {var value = +$(this).text()*1;if(!isNaN(value)) {if(!max||value>max){max=value;maxIndex=$(this).index();}}});if(maxIndex!== null){lignes.eq(maxIndex).css('color','red');}})

**FirePrawn** · 14/12/2012, 12h36

Tricheur

**SpaceFrog** · 14/12/2012, 12h42

quoi et encore y'a qu'un ligne car le premier each englobe tout ...

**mitchreward** · 14/12/2012, 13h38

Merci beaucoup !!! je vais implémenter ça dans mon code

**mitchreward** · 14/12/2012, 14h19

Le truc c'est que dans la version en JS le nombre de ligne max du tableau est spécifié dans la boucle, alors que mon tableau html à moi est généré par php il est donc amené à grandir dynamiquement chaque jour

Voici mon code :

Code html :

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
51
52
53
54
55
56
<TABLE id="foo" class="selection" align="center" cellspacing="0" cellpadding="2" border="0">
<TR bgcolor="#C4CAD0">
<TD width="200" align="center" valign="middle" height="13">Date</TD>
<TD width="100" align="center" valign="middle" height="13">7h</TD>
<TD width="100" align="center" valign="middle" height="13">8h</TD>
<TD width="100" align="center" valign="middle" height="13">9h</TD>
<TD width="100" align="center" valign="middle" height="13">10h</TD>
<TD width="100" align="center" valign="middle" height="13">11h</TD>
<TD width="100" align="center" valign="middle" height="13">12h</TD>
<TD width="100" align="center" valign="middle" height="13">13h</TD>
<TD width="100" align="center" valign="middle" height="13">14h</TD>
<TD width="100" align="center" valign="middle" height="13">15h</TD>
<TD width="100" align="center" valign="middle" height="13">16h</TD>
<TD width="100" align="center" valign="middle" height="13">17h</TD>
<TD width="100" align="center" valign="middle" height="13">18h</TD>
<TD width="100" align="center" valign="middle" height="13">19h</TD>
<TD width="100" align="center" valign="middle" height="13">20h</TD>
<TD width="100" align="center" valign="middle" height="13">21h</TD>
<TD width="100" align="center" valign="middle" height="13">Moyenne vent</TD>  
</TR>
<TR bgcolor="#C4CAD0">
<TD width="200" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-2)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(2)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-3)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(3)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>
<TD width="100" align="center" valign="middle" height="13"><img src="css/top.png" border="0" alt="Décroissant" onclick="RangeTableau(-4)"><img src="css/bot.png" border="0" alt="Croissant" onclick="RangeTableau(4)"></TD>  
  </TR>
 
 
  <?php
include ('connect.php') ;
if (isset($_POST['lespot'])) {
  $lespot=  $_POST['lespot'] ;
  $query1 = "SELECT * FROM $lespot ORDER BY date DESC";
  $result1 = mysql_query ($query1) or die ('erreur SELECT SQL !');
  $force ="";
   while ($row = mysql_fetch_array($result1)) {
     $max= max($row[vit_7h],$row[vit_8h],$row[vit_9h],$row[vit_10h],$row[vit_11h],$row[vit_12h],$row[vit_13h],$row[vit_14h],$row[vit_15h],$row[vit_16h],$row[vit_17h],$row[vit_18h],$row[vit_19h],$row[vit_20h],$row[vit_21h]);
     echo "<TR BGCOLOR=#EEEEEE><TD align=\"center\">$row[date]</TD><TD align=\"center\">$row[vit_7h]</TD><TD align=\"center\">$row[vit_8h]</TD><TD align=\"center\">$row[vit_9h]</TD><TD align=\"center\">$row[vit_10h]</TD><TD align=\"center\">$row[vit_11h]</TD><TD align=\"center\">$row[vit_12h]</TD><TD align=\"center\">$row[vit_13h]</TD><TD align=\"center\">$row[vit_14h]</TD><TD align=\"center\">$row[vit_15h]</TD><TD align=\"center\">$row[vit_16h]</TD><TD align=\"center\">$row[vit_17h]</TD><TD align=\"center\">$row[vit_18h]</TD><TD align=\"center\">$row[vit_19h]</TD><TD align=\"center\">$row[vit_20h]</TD><TD align=\"center\">$row[vit_21h]</TD><TD class=\"jaune\" align=\"center\">$row[moyenne]</TD></TR>" ;
   }
 
}  
?>
</TABLE >

**SpaceFrog** · 14/12/2012, 14h24

et ?

**mitchreward** · 14/12/2012, 14h46

Et ça ne marche pas, sans que je comprenne pourquoi .

sorry

**SpaceFrog** · 14/12/2012, 14h59

regarde bien ce que contiennent tes cellules ...
du numérique ou de l'alpha numerique ?

=>

Code :

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

if(parseInt(cellules[i].innerHTML,10)==tabval[ligne]){

**mitchreward** · 14/12/2012, 15h21

Oui effectivement c'est bien ça le problème, j'ai une colonne alpha-numérique qui affiche la DATE dans mon tableau .

si je la vire ça marche .

Mais, il y a il un moyen de ne pas la prendre en compte dans la fonction JS ?

**SpaceFrog** · 14/12/2012, 15h26

skippe l'indexe de cette colonne ...

**DrDarko** · 14/12/2012, 15h26

Envoyé par SpaceFrog

Code :

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

1
2
$('tr').each(function() {var lignes = $(this).children('td'),max = null, maxIndex = null;
 lignes.each(function() {var value = +$(this).text()*1;if(!isNaN(value)) {if(!max||value>max){max=value;maxIndex=$(this).index();}}});if(maxIndex!== null){lignes.eq(maxIndex).css('color','red');}})

HUM HUM...
2 lignes...

**Bovino** · 14/12/2012, 15h33

Oui, un peu de zèle dans la présentation... ça se fait effectivement en une seule !

Code :

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

$('tr').each(function() {var lignes = $(this).children('td'),max = null, maxIndex = null; lignes.each(function() {var value = +$(this).text()*1;if(!isNaN(value)) {if(!max||value>max){max=value;maxIndex=$(this).index();}}});if(maxIndex!== null){lignes.eq(maxIndex).css('color','red');}})