Раскраска строк таблицы на основе высокого / низкого значения с помощью Javascript или Jquery - PullRequest
Новая
       8

Раскраска строк таблицы на основе высокого / низкого значения с помощью Javascript или Jquery

0 голосов
/ 01 ноября 2018

Я пытаюсь создать функцию, которая будет раскрашивать содержимое таблицы на основе значений строки.

Я могу получить данные из каждой строки в массив и сохранить низкие и высокие значения в переменной. Как я могу добавить низкий или высокий класс к низким и высоким значениям в каждой строке?

В каждом tr я хочу сравнить только 1-ю, 2-ю и 3-ю позиции, поскольку нулевая позиция - это индекс. 

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>

1 Ответ

0 голосов
/ 01 ноября 2018

Вы можете использовать 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');
      });
    }
  }



};
...