[英]Colorizing table rows based on high/ low value with Javascript or Jquery
我正在嘗試創建一個函數，該函數將根據行的值來着色表的內容。
我能夠將每一行的數據放入一個數組並將低值和高值保存到變量中。 如何在每行的低和高值中添加低或高類？
在每個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>
您可以使用Jquery執行此操作。 這是示例。 希望對您有幫助，我的朋友:)）
<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');
});
}
}
};
根據javascript / jquery中從低到高的div類型對div排序數組
[英]sort array of divs based on types of divs from low to high in javascript/jquery
使用javascript按具有高，中，低值的列對html表進行排序
[英]Sort html table by columns with high, medium, low values using javascript
使用 Jquery/Javascript 根據按鈕單擊獲取表行值
[英]Get table row value based on button click using Jquery/Javascript
根據導入的值在表的下拉列表中設置一個值 [javascript, jquery]
[英]setting a value in the dropdowns in table based on imported values [javascript, jquery]
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.