Подсветить min и max значение в таблице
Здравствуйте.
Помогите, пожалуйста, с кодом js. Необходимо в каждой строке подсветить одним цветом минимальную цифру и другим цветом максимальную. Заранее благодарен. Код:
<table> |
den1a,
циклом обойти все ячеки и сохранить индексы ячеек с max и min, потом ячейкам с этими индексами поменять цвет. всё. начните хотя бы ... |
<style>.min {
color: red;
}
.max {
color: green;
}
</style>
<table>
<tr>
<td>11</td>
<td>22</td>
<td>65</td>
<td>14</td>
<td>35</td>
</tr>
<tr>
<td>39</td>
<td>12</td>
<td>84</td>
<td>45</td>
<td>38</td>
</tr>
<tr>
<td>37</td>
<td>39</td>
<td>52</td>
<td>38</td>
<td>24</td>
</tr>
</table>
<script>
HTMLCollection.prototype.forEach = NodeList.prototype.forEach = Array.prototype.forEach;
var min, max, val;
var allTd = document.querySelectorAll('td');
allTd.forEach(function(el) {
val = +el.innerHTML;
if (!min) {
max = val;
min = val;
} else {
if (val > max) max = val;
if (val < min) min = val;
}
});
allTd.forEach(function(el) {
val = +el.innerHTML;
if (val === min) el.className = 'min';
if (val === max) el.className = 'max';
});
</script>
в 2 прохода |
Poznakomlus,
а почему не 1? :) |
:write: :)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var a = [].slice.call(document.querySelectorAll("td"), 0);
a.sort(function(a, b) {
return b.textContent - a.textContent
});
a[0].style.backgroundColor = "#FF0000";
a.slice(-1)[0].style.backgroundColor = "#008000"
});
</script>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>22</td>
<td>65</td>
<td>14</td>
<td>35</td>
</tr>
<tr>
<td>39</td>
<td>12</td>
<td>84</td>
<td>45</td>
<td>38</td>
</tr>
<tr>
<td>37</td>
<td>39</td>
<td>52</td>
<td>38</td>
<td>24</td>
</tr>
</table>
</body>
</html>
|
Цитата:
|
вариант с 1 циклом
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.max {
background-color: #FF0000;
}
.min{
background-color: #008000;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
for (var d = document.querySelectorAll("td"), c = 0; c < d.length; c++) {
var b = d[c],
a = document.querySelector(".max") || b;
+a.textContent < +b.textContent && (a.classList.remove("max"), a = b);
a.classList.add("max");
a = document.querySelector(".min") || b;
+a.textContent > +b.textContent && (a.classList.remove("min"), a = b);
a.classList.add("min")
}
});
</script>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>22</td>
<td>65</td>
<td>14</td>
<td>35</td>
</tr>
<tr>
<td>39</td>
<td>12</td>
<td>84</td>
<td>45</td>
<td>38</td>
</tr>
<tr>
<td>37</td>
<td>39</td>
<td>52</td>
<td>38</td>
<td>24</td>
</tr>
</table>
</body>
</html>
|
еще вариант в 1 проход
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>22</td>
<td>65</td>
<td>14</td>
<td>35</td>
</tr>
<tr>
<td>39</td>
<td>12</td>
<td>84</td>
<td>45</td>
<td>38</td>
</tr>
<tr>
<td>37</td>
<td>39</td>
<td>52</td>
<td>38</td>
<td>24</td>
</tr>
</table>
<script>
window.onload = function() {
var allTd = document.querySelectorAll("td"),
min,
max;
for (var i = 0, el; i < allTd.length; i += 1) {
el = allTd[i];
val = +el.innerHTML; //IE8
if (!min) {
max = {
val: val,
idx: i
};
min = {
val: val,
idx: i
};
} else {
if (val > max.val) {
max.val = val;
max.idx = i;
}
if (val < min.val) {
min.val = val;
min.idx = i;
}
}
}
allTd[min.idx].style.backgroundColor = "#FF0000";
allTd[max.idx].style.backgroundColor = "#008000"
};</script>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.min {
color: red;
}
.max {
color: blue;
}
</style>
<script type='text/javascript'>
window.onload=function(){
var o=document.getElementsByTagName('table')[0];
var html,arr,min,max,reg;
for (var i=0; i<o.rows.length; i++) {
html=o.rows[i].innerHTML;
arr=html.match(/\d+/g);
arr=arr.sort();
min=arr[0];
max=arr[arr.length-1];
reg=new RegExp('<td>('+min+'</td>)','gim');
html=html.replace(reg,'<td class="min">$1');
reg=new RegExp('<td>('+max+'</td>)','gim');
html=html.replace(reg,'<td class="max">$1');
o.rows[i].innerHTML=html;
};
};
</script>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>22</td>
<td>65</td>
<td>14</td>
<td>35</td>
</tr>
<tr>
<td>39</td>
<td>12</td>
<td>84</td>
<td>45</td>
<td>38</td>
</tr>
<tr>
<td>37</td>
<td>39</td>
<td>52</td>
<td>38</td>
<td>24</td>
</tr>
</table>
</body>
</html>
|
ksa,
оно что подсвечивает? |
| Часовой пояс GMT +3, время: 21:00. |