比较javascript中的浮动并更改最高值的颜色_Javascript_Php_Html

比较javascript中的浮动并更改最高值的颜色

javascript php html

比较javascript中的浮动并更改最高值的颜色,javascript,php,html,Javascript,Php,Html,我有一个HTML表，是用php制作的，带有数据库中的值我想得到最高的价格，并改变这一个颜色（相同的最低价格）。但在我的脚本中，我认为我的比较有一个问题，因为它缺少1/2的值。（我的英语不是很好，所以我希望你能理解代码）完整值为：12.73 12.90 11.17 22.90 12.90 14.9012.9012.90 粗体显示的是红色显示的以及守则： <table> <tr>

我有一个HTML表，是用php制作的，带有数据库中的值

我想得到最高的价格，并改变这一个颜色（相同的最低价格）。但在我的脚本中，我认为我的比较有一个问题，因为它缺少1/2的值。（我的英语不是很好，所以我希望你能理解代码）

完整值为：12.73 12.90 11.17 22.90 12.90 14.9012.9012.90 粗体显示的是红色显示的

以及守则：

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


响
笔名
大奖赛（欧元）
描述
阿查特决定
1.
12.73
扭曲的小丑dans la saison 4 d'美国恐怖故事
/
12.73
2.
12.90
我是史密斯·丹探员
史密斯探员雕像
12.90
3.
11.17
芬丹冒险时代
弗雷斯德波特酒店。亚马逊河畔
11.17
4.
22.90
《泰坦巨兽》动漫新纪元。小雕像加上grande que d'hab donc prix+élevé
/
22.90
5.
12.90
马蒂·麦克·费丹的《未来的回忆》三部曲
/
12.90
6.
14.90
勒德杜电影《大勒博斯基》
/
14.90
7.
12.90
迪斯尼电影公司
/
12.90
8.
12.90
蒂姆·l’Enchancer du film SacréGraal des Monty Python
Prendre Tim l'Enchancher。Celui avec les cornes和le lapin
12.90
var prix=新数组；
prix[0]=document.getElementsByClassName（'prix'）；
var i=0；
最便宜的风险值=0；
而（i<7）{
控制台日志（i）；
if（Number（prix[0][i].innerHTML）>Number（prix[0][i+1].innerHTML））{
最便宜=prix[0][i+1]；
log（最便宜的.innerHTML）；
}
i++；
}
最便宜的.style.color='red'；

如果有人能帮我，那就太棒了。如果您需要更多详细信息，请告诉我。

您可以使用

Array.prototype.slice（）

将

HTMLCollection

转换为数组，

Array.prototype.map（）

将元素的

.innerHTML

作为数组返回

Math.min（）

，

Math.max（）

，

Array.prototype.indexOf（）

从

htmlcollection

的索引中选择元素，其中greastest或least number为

。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";

您是否可以在问题中包括呈现的

html

？似乎有两个

12.90

值？哪个应该将

颜色设置为“红色”
？那么，11.17
应该是红色的。我会在屏幕上显示我的问题。“好吧，11.17应该是红色的”为什么11.17
会是红色的，而不是12.90
？你能在问题中包括呈现html的实际文本吗？是的，那只是测试，颜色目前并不重要。哦，是的，当然（我太笨了）我在控制台中得到了：uncaughttypeerror:无法读取未定义的属性'style'，所以prix
可能是null@Von_Kavalier是在window.onload=function（）{}
中调用的js
at-post吗？或者，在加载DOM
之后？哼。。。我缺乏js方面的知识。。。我该怎么做/@Von_Kavalier在el.innerHTML
之前添加了+
操作符，以从.map（）
返回数字，该数字应更正未捕获的类型错误：无法通过返回正确的索引而不是-1JSFIDLE OMG来读取未定义的属性“style”！很好用。。非常感谢你。遗憾的是，我自己没有找到它，但答案至少在这里：）谢谢
<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>

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";