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

**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]){

Surligner la valeur maximale dans un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager