Vergleichen floats in Javascript und ändern Sie die Farbe der höchsten

Question

Ich habe eine HTML-Tabelle, in PHP mit den Werten in meiner Datenbank gemacht.

Ich möchte den höchsten Preis und ändern Sie die Farbe dieses einen (das gleiche für den kleinsten Preis). Aber in meinem Skript finde ich ein Problem in meinem Vergleich, weil es 1/2 Wert vermisst. (Mein Englisch ist nicht wirklich gut, so hoffe ich Dich mit dem Code verstehen werden)

<table> 
     <tr> 
     <th>Rang</th> 
     <th>Nom</th> 
     <th>Prix(€)</th> 
     <th >Description</th> 
     <th>Précisions d'achat</th> 
    </tr> 

    <?php 
     $i=1; 
     while($donnees = $resultPop->fetch()){ 
      echo '<tr> 
      <td>'.$i.'</td> 
      <td><a href="'.$donnees['POP_LINK'].'">'.$donnees['POP_NOM'].'</a></td> 
      <td class="prix">'.$donnees['POP_PRIX'].'</td> 
      <td>'.$donnees['POP_DESCRIPTION'].'</td> 
      <td>'.$donnees['POP_PRECISION'].'</td> 
      </tr>'; 
      $i++; 
     } 
    ?> 
    </table> 
    <script> 
     var prix = new Array; 
     prix[0] = document.getElementsByClassName('prix'); 
     var i = 0; 
     var cheapest = 0; 
     while(i< 7){ 
      console.log(i); 
      if (Number(prix[0][i].innerHTML) > Number(prix[0][i+1].innerHTML)){ 
       cheapest = prix[0][i+1]; 
       console.log(cheapest.innerHTML); 
      } 
      i++; 
     } 
     cheapest.style.color = 'red'; 
    </script> 

Oder ich dachte, vielleicht eine PHP-Funktion zu tun, aber dann weiß ich nicht, wie die Farbe des Textes zu ändern .. .

ist die Ausgabe der Konsole:

0 
1 
11.17 
2 
3 
12.90 
4 
5 
12.90 
6 

die vollständigen Werte: 12,73 12,90 11,17 22,90 12,90 14,90 12,90 12,90 der in bold der in rot angezeigt wird.

Here is the rendered HTML Und der Code:

<table> 
        <tr> 
         <th>Rang</th> 
         <th>Nom</th> 
         <th>Prix(€)</th> 
         <th >Description</th> 
         <th>Précisions d'achat</th> 
        </tr> 

        <tr> 
           <td>1</td> 
           <td><a href="">Twisty - AHS</a></td> 
           <td class="prix">12.73</td> 
           <td>Twisty le clown dans la saison 4 d'American Horror Story</td> 
           <td>/</td> 
          </tr>12.73<tr> 
           <td>2</td> 
           <td><a href="">Agent Smith - Matrix</a></td> 
           <td class="prix">12.90</td> 
           <td>L'agent Smith dans Matrix</td> 
           <td>Prendre la figurine de l'agent Smith</td> 
          </tr>12.90<tr> 
           <td>3</td> 
           <td><a href="">Finn - Adventure Time</a></td> 
           <td class="prix">11.17</td> 
           <td>Finn dans Adventure Time</td> 
           <td>Frais de port gratuit. Sur Amazon</td> 
          </tr>11.17<tr> 
           <td>4</td> 
           <td><a href="">Titan Colossal - SNK</a></td> 
           <td class="prix">22.90</td> 
           <td>Le Titan Colossal de l'anime Shingeki No Kyojin. Figurine plus grande que d'hab donc prix + élevé</td> 
           <td>/</td> 
          </tr>22.90<tr> 
           <td>5</td> 
           <td><a href="">Marty McFly - BTTF</a></td> 
           <td class="prix">12.90</td> 
           <td>Marty Mc Fly dans la trilogie Retour vers le futur</td> 
           <td>/</td> 
          </tr>12.90<tr> 
           <td>6</td> 
           <td><a href="">The Dude - TBL</a></td> 
           <td class="prix">14.90</td> 
           <td>Le Duc du film The Big Lebowski</td> 
           <td>/</td> 
          </tr>14.90<tr> 
           <td>7</td> 
           <td><a href="">Wall-E</a></td> 
           <td class="prix">12.90</td> 
           <td>Wall-E du film Disney éponyme</td> 
           <td>/</td> 
          </tr>12.90<tr> 
           <td>8</td> 
           <td><a href="">Tim The Enchanter - HG</a></td> 
           <td class="prix">12.90</td> 
           <td>Tim l'Enchanteur du film Sacré Graal des Monty Python</td> 
           <td>Prendre Tim l'Enchanteur. Celui avec les cornes et le lapin</td> 
          </tr>12.90     </table> 
       <script> 
        var prix = new Array; 
        prix[0] = document.getElementsByClassName('prix'); 
        var i = 0; 
        var cheapest = 0; 
        while(i< 7){ 
         console.log(i); 
         if (Number(prix[0][i].innerHTML) > Number(prix[0][i+1].innerHTML)){ 
          cheapest = prix[0][i+1]; 
          console.log(cheapest.innerHTML); 
         } 
         i++; 
        } 
        cheapest.style.color = 'red'; 

       </script> 

Wenn jemand mir helfen könnte, die wäre genial. Und sag mir, wenn du mehr Details brauchst.

Answer 1

Array.prototype.slice() Sie können HTMLCollection auf ein Array zu konvertieren, Array.prototype.map().innerHTML der Elemente als ein Array zurückzubringen; Math.min(), Math.max(), Array.prototype.indexOf() auswählen Element aus HTMLColloection bei Index, in dem greastest oder geringste Anzahl ist .innerHTML

var prix = document.getElementsByClassName("prix"); 
// added `+` operator to convert string to number 
var n = [].slice.call(prix).map(function(el) {return +el.innerHTML}); 
var max = Math.max.apply(Math, n); 
var maxIndex = n.indexOf(max); 
var min = Math.min.apply(Math, n); 
var minIndex = n.indexOf(min); 
prix[maxIndex].style.color = "green"; 
prix[minIndex].style.color = "red";