Question

这是我的表

public function __construct()
{
    $this->setFillable();
}
public function setFillable()
{
    $fields = \Schema::getColumnListing('table_name_here');

    $this->fillable[] = $fields;
}

如何从第二列（名称后）获取每列，并将最高值类设置为高，最低值类为低？如果更多的td具有相同的值并且最高（或最低），则所有td必须具有适当的类别。

<table id="aktivita">
  <tr>
    <td>Jack</td>
    <td>450</td>
    <td>794</td>
    <td>784</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>145</td>
    <td>794</td>
    <td>789</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>2794</td>
    <td>2794</td>
    <td>79</td>
  </tr>
</table>

这就是我的意思。我不太喜欢使用变量基本相同的代码。有没有办法让它干燥？

Answer 1

您可以循环td并查找最小值和最大值并相应地处理

＆＃13;

$(function(){
  var cols = []
  var trs = $('#aktivita tr')
  var data =$.each(trs , function(index, tr){
    $.each($(tr).find("td").not(":first"), function(index, td){
      cols[index] = cols[index] || [];
      cols[index].push($(td).text())
    })
  });
  cols.forEach(function(col, index){
    var max = Math.max.apply(null, col);
    var min = Math.min.apply(null, col)
    $('#aktivita tr').find('td:eq('+(index+1)+')').each(function(i, td){
      $(td).toggleClass('max', +$(td).text() === max)
      $(td).toggleClass('min', +$(td).text() === min)  
    })
  })
})

＆＃13;

.max {
  color: blue
}

.min {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="aktivita">
  <tr>
    <td>Jack</td>
    <td>450</td>
    <td>794</td>
    <td>784</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>145</td>
    <td>794</td>
    <td>789</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>2794</td>
    <td>2794</td>
    <td>79</td>
  </tr>
</table>

＆＃13;

Answer 2

您可以使用map()查找每个tr的最小值和最大值，并添加类。

＆＃13;

var i = 1;

while (i < $('tr:first-child td').length) {
  var ar = $('table tr').map(function() {
    return Number($(this).find('td:nth-child(' + (i + 1) + ')').text());
  })

  var max = Math.max.apply(null, ar);
  var min = Math.min.apply(null, ar);

  var ar = $('table tr').find('td').each(function() {
    if (Number($(this).text()) == max) {
      $(this).addClass('max');
    } else if (Number($(this).text()) == min) {
      $(this).addClass('min');
    }
  })

  i++;
}

＆＃13;

.max {
  color: red;
}
.min {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="aktivita">
  <tr>
    <td>Jack</td>
    <td>450</td>
    <td>794</td>
    <td>784</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>145</td>
    <td>794</td>
    <td>789</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>2794</td>
    <td>2794</td>
    <td>79</td>
  </tr>
</table>

＆＃13;

Answer 3

这个似乎对我有用：

var offset = 1;

$('#aktivita tr').each(function () {
    var values = [];

    $(this).children('td').each(function (i,v) {
        if (i < offset) return;
        var value = parseInt($(this).text());
        if(!isNaN(value))
            values.push(value);
    });

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

    $(this).children('td').each(function () {
        if ($(this).text() == maxValue.toString()) {
            $(this).addClass('max');
        }

        if ($(this).text() == minValue.toString()) {
            $(this).addClass('min');
        }
    });

});

其中offset是实际值开始之前的列数（以防您只提供简化数据）。

jQuery / JavaScript在表列中找到最高值

3 个答案: