[英]Colorizing table rows based on high/ low value with Javascript or Jquery
I am trying to create a function that will colorize the contents of the table based on the values of the row. 我正在尝试创建一个函数,该函数将根据行的值来着色表的内容。
I am able to get the data from each row into an array and save the low and high values to a variable. 我能够将每一行的数据放入一个数组并将低值和高值保存到变量中。 How can I add a class low or high to the low and high values in each row? 如何在每行的低和高值中添加低或高类?
In each tr I only want to compare the 1st,2nd,and 3rd position as the zero position is the index. 在每个tr中,我只想比较第一,第二和第三位置,因为零位置是索引。
function showRows(s) { var t = s.options[s.selectedIndex].text; var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c; while (r = rows[i++]) { if (t == 'All') { r.style.display = '' } else { c = r.getElementsByTagName('td')[0].firstChild.nodeValue; sxval = r.getElementsByTagName('td')[1].firstChild.nodeValue; fcval = r.getElementsByTagName('td')[2].firstChild.nodeValue; sgval = r.getElementsByTagName('td')[3].firstChild.nodeValue; unval = r.getElementsByTagName('td')[4].firstChild.nodeValue; array = [sxval, fcval, sgval, unval] var low = Math.min(...array) var high = Math.max(...array) console.log("lowest" + " " + low) console.log("highest" + " " + high) console.log(c) console.log(t) r.style.display = parseInt(c) == parseInt(t) ? '' : 'none'; } } }
<body> <table align="center" border="1" width="50%" cellspacing="0" cellpadding="4"> <tr> <th> <select name="mylist" onchange="showRows(this)"> <option value="m1">All</option> <option value="m2">4</option> <option value="m3">4.5</option> <option value="m4">5</option> </select> </th> </tr> <br> <table id="mytab" align="center" border="1" width="50%" cellspacing="0" cellpadding="4"> <tr class="content"> <td class="cj-has-text-centered contentcheck"> 4 </td> <td class="cj-has-text-centered"> 50 </td> <td class="cj-has-text-centered"> 100 </td> <td class="cj-has-text-centered"> 200 </td> <td class="cj-has-text-centered"> 300 </td> </tr> <tr class="content"> <td class="cj-has-text-centered contentcheck"> 4.5 </td> <td class="cj-has-text-centered"> 50 </td> <td class="cj-has-text-centered"> 100 </td> <td class="cj-has-text-centered"> 200 </td> <td class="cj-has-text-centered"> 300 </td> </tr> <tr class="content"> <td class="cj-has-text-centered contentcheck"> 5 </td> <td class="cj-has-text-centered"> 50 </td> <td class="cj-has-text-centered"> 100 </td> <td class="cj-has-text-centered"> 200 </td> <td class="cj-has-text-centered"> 300 </td> </tr> </table>
You can use Jquery to do this. 您可以使用Jquery执行此操作。 Here is the sample. 这是示例。 Hope to help, my friend :)) 希望对您有帮助,我的朋友:))
<style>
.highest{
background-color:blue;
}
.lowest{
background-color:red;
}
</style>
function showRows(s) {
var t = s.options[s.selectedIndex].text;
var rows = document.getElementById('mytab').getElementsByTagName('tr'),
i = 0,
r, c;
while (r = rows[i++]) {
if (t == 'All') {
r.style.display = ''
} else {
c = r.getElementsByTagName('td')[0].firstChild.nodeValue;
sxval = r.getElementsByTagName('td')[1].firstChild.nodeValue;
fcval = r.getElementsByTagName('td')[2].firstChild.nodeValue;
sgval = r.getElementsByTagName('td')[3].firstChild.nodeValue;
unval = r.getElementsByTagName('td')[4].firstChild.nodeValue;
array = [sxval, fcval, sgval, unval]
var low = Math.min(...array)
var high = Math.max(...array)
console.log("lowest" + " " + low)
console.log("highest" + " " + high)
console.log(c)
console.log(t)
r.style.display = parseInt(c) == parseInt(t) ? '' : 'none';
//Skip the first column, use :not(:first-child)
$('tr').each(function(){
var vals = $('td:not(:first-child)',this).map(function () {
return parseInt($(this).text(), 10) ? parseInt($(this).text(), 10) : null;
}).get();
// then find their minimum
var min = Math.min.apply(Math, vals);
var max = Math.max.apply(Math, vals);
// tag any cell matching the min and max value
$('td', this).filter(function () {
return parseInt($(this).text(), 10) === min;
}).addClass('highest');
$('td', this).filter(function () {
return parseInt($(this).text(), 10) === max;
}).addClass('lowest');
});
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.