Colorizing table rows based on high/ low value with Javascript or Jquery

Question

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.

 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>

Answer 1

You can use Jquery to do this. 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');
      });
    }
  }



};

Colorizing table rows based on high/ low value with Javascript or Jquery

Question

1 answers

solution1
0 ACCPTED 2018-11-01 19:00:04

Colorizing table rows based on high/ low value with Javascript or Jquery

Question

1 answers

solution1 0 ACCPTED 2018-11-01 19:00:04

solution1
0 ACCPTED 2018-11-01 19:00:04