Surligner la valeur maximale dans un tableau

Version imprimable

14/12/2012, 10h53
mitchreward

Surligner la valeur maximale dans un tableau

Salut la communauté,

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

http://anons.fr/screenshot.png

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 :oops:
14/12/2012, 11h06
SpaceFrog

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

si oui en deux lignes de jquery c'est réglé ...
14/12/2012, 11h38
DrDarko

Citation:

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.
14/12/2012, 11h44
mitchreward

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

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:

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>

La version JQUERY

Code:

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:

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');}})

14/12/2012, 12h36
FirePrawn

Tricheur :ptdr:
14/12/2012, 12h42
SpaceFrog

quoi et encore y'a qu'un ligne car le premier each englobe tout ...
14/12/2012, 13h38
mitchreward

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

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:

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 >

14/12/2012, 14h24
SpaceFrog

et ?
14/12/2012, 14h46
mitchreward

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

sorry:cry:
14/12/2012, 14h59
SpaceFrog

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

=>

Code:

if(parseInt(cellules[i].innerHTML,10)==tabval[ligne]){
14/12/2012, 15h21
mitchreward

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 ?
14/12/2012, 15h26
SpaceFrog

skippe l'indexe de cette colonne ...

Citation:

Envoyé par SpaceFrog

Code:

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...

14/12/2012, 15h33
Bovino

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

Code:

$('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');}})
14/12/2012, 15h33
SpaceFrog

oui je sais ... y'en n'a qu'une ...
le premier each englobe tout , mais j'ai mis sur deux lignes pour plus de clarté ^^ .

:aie:
14/12/2012, 15h35
mitchreward

Alors jsuis vraiment désolé et j'ai conscience que ça doit énervant . Mais ..jsuis quasi inculte en JS ...:roll:

je ne sais pas comment éviter un index
14/12/2012, 15h36
FirePrawn

C'est sûr que c'est hyper lisible là :aie:
14/12/2012, 15h38
SpaceFrog

tu peux filer le code html d'un tr complet ?

Voila une tr complète une fois générée :

Code:

1
2
 
<TR BGCOLOR=#EEEEEE><TD align="center">2012-12-14</TD><TD align="center">13</TD><TD align="center">13</TD><TD align="center">15</TD><TD align="center">15</TD><TD align="center">16</TD><TD align="center">16</TD><TD align="center">16</TD><TD align="center">17</TD><TD align="center">18</TD><TD align="center">20</TD><TD align="center">23</TD><TD align="center">24</TD><TD align="center">25</TD><TD align="center">25</TD><TD align="center">24</TD><TD class="jaune" align="center">0</TD></TR>

14/12/2012, 16h12
SpaceFrog
la date est donc dans la première cellule ??

Code:

for(i=0;i<cl;i++){

devient
Code:

1 2 for(i=1;i<cl;i++){
14/12/2012, 16h32
mitchreward

merci beaucoup de toute cette aide, ça marche parfaitement !