比较javascript中的浮动并更改最高浮动的颜色
Compare floats in javascript and change the color of the highest
我有一个HTML表,用php制作,其中包含数据库中的值。
我想得到最高的价格,并改变这个的颜色(最小的价格也是一样)。但在我的脚本中,我认为我的比较有问题,因为它错过了1/2的值。(我的英语不是很好,所以我希望你能理解代码)
<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>
或者我想做一个php函数,但后来我不知道如何更改文本的颜色。。。
这是控制台输出:
0
1
11.17
2
3
12.90
4
5
12.90
6
完整值为:12.73 12.90 11.17 22.90 12.90 14.9012.9012.90粗体显示的是红色显示的。
这是呈现的HTML代码:
<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>
如果有人能帮我,那就太棒了。如果你需要更多的细节,请告诉我。
可以使用Array.prototype.slice()
将HTMLCollection
转换为数组,使用Array.prototype.map()
将元素的.innerHTML
作为数组返回;Math.min()
、Math.max()
、Array.prototype.indexOf()
从索引处的HTMLColloection
中选择元素,其中油脂测试或最小编号为.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";
相关文章:
- 高亮显示时编辑文本大小和颜色
- 动态更改高图中的系列颜色
- 比较javascript中的浮动并更改最高浮动的颜色
- 指定饼图高图的颜色
- 我可以为高图表中的所有文本设置默认颜色吗?
- 如何在高亮显示时更改文本颜色
- 一次高亮显示一个城市,并在悬停其他城市时删除颜色填充
- 如何根据高图中的值获得动态颜色变化
- 动态更新breadcrumb&高亮显示活动颜色
- 如何在高图表中更改单个气泡的颜色和不透明度
- 更改高图表系列颜色
- 通过 sql 数据绘制高图表柱形图颜色
- 高图表 - 饼图动态更改切片颜色
- 高图鼠标跟踪颜色
- 高图,条形图,在悬停时更改条形颜色
- 高图表颜色不显示
- 改回高亮颜色
- 更改焦点,选择文本字段的高亮颜色
- 高图:更改柱状图的高亮颜色
- 更改的高亮颜色