Destacando celdas de la tabla HTML en función de valor (jQuery)

Bogdan Ilkiv:

Hay una tabla que se rellenará en función del elemento desplegable seleccionado. Aquí está el código (que no insertar una línea con elementos desplegables):

<table id="myPlaneTable" class="table table-bordered">
    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">487</td>
        <td style="width: 15%">450</td>
        <td style="width: 15%">600</td>
    </tr>

    <tr>
        <td style="width: 20%">Max speed</td>
        <td style="width: 15%">580</td>
        <td style="width: 15%">490</td>
        <td style="width: 15%">543</td>
        <td style="width: 15%">742</td>
    </tr>
</table

Esto es lo que parece Rellena el texto de la imagen aquí

Como yo estaba empezando a aprender jQuery, probé el siguiente código, pero no funciona

$("#myPlaneTable tbody tr.data-in-table").each(function () {
    $(this).find('td').each(function (index) {
        var currentCell = $(this);
        var nextCell = $(this).next('td').length > 0 ? $(this).next('td') : null;
        if (index%2==0&&nextCell && currentCell.text() !== nextCell.text()) {
            currentCell.css('backgroundColor', 'red');
            nextCell.css('backgroundColor', 'green');
        }
    });
});

El resultado que estoy tratando de conseguir Introduzca aquí la descripción de la imagen

  1. Destacando aunque sólo sea el mejor y el peor valor (no entre)
  2. Si los datos coinciden en varias células, es necesario destacar demasiado
  3. Si no hay datos, la célula debe ser sin destacar
  4. Los datos se debe comparar el plazo de una <tr>, ya que habrá varias líneas
azametli:

Puede almacenar todos los valores de cada fila de una matriz.
A continuación, almacenar los valores mínimo y máximo, y finalmente aplicar el color a cada uno <td>si la coincidencia de valor.

$("#myPlaneTable tbody tr").each(function () {

    var values = [];
    var tds = $(this).find('td');

    tds.each(function () {   

      if ($.isNumeric($(this).text())) {   
        values.push($(this).text());
      }

    });

    var min = Math.min.apply(Math, values);
    var max = Math.max.apply(Math, values);

    tds.each(function () {
      if ($(this).text() == min) {
        $(this).css('backgroundColor', 'red');
      }
      if ($(this).text() == max) {
        $(this).css('backgroundColor', 'green');
      }
    });

});

Supongo que te gusta

Origin http://43.154.161.224:23101/article/api/json?id=282937&siteId=1
Recomendado
Clasificación