怎样用jquery或者bootstrap将一个table中最大的数值元素标红？

Question

在html页面中有一个table id="xx"
怎样用jquery或者bootstrap将这个表格中最大的元素标红呢？

Answer 1

大概思路就是这个样子，找到所有 td 获取他们的文本内容，然后迭代，与上一次的最大值进行比较处理，考虑可能会重复的情况或者把 elements 做成了数组 ，最终设置样式。

  Array.from(document.querySelectorAll('#xx td')).reduce(function (result, el) {
    const prev = result.max || 0

    let current = parseFloat(el ? el.textContent : '')
    current = Number.isNaN(current) ? 0 : current

    if (current > prev) {
      result.max = current
      result['elements'] = [el]
    } else if (current === prev) {
      result.max = current
      result['elements'].push(el)
    } else {
      result.max = prev
    }

    return result

  }, {
    max: 0,
    elements: [],
  }).elements.forEach((el) => el.style.color = 'red')

Answer 2

jQuery 版，未调试

let td = [];
let max = Number.Number.NEGATIVE_INFINITY; // 负无穷，最小的数
$('#id td).each((index, el) => {
  const number = Number(td.textContent);
  if (number > max) {
    td = [el];
    max = number;
  } else if (number === max) {
    td.push(el);
    max = number;
  }
});
$(td).css('color', 'red');

Answer 3

var maxValue = "";
$("#id td").sort(function(a, b) {
    return b.innerText - a.innerText;
}).each(function() {
    var that = $(this);
    var text = that.text();
    if (!maxValue) maxValue = text;
    if (text === maxValue) {
        that.css("color", "red");
    } else {
        return false;
    }
});

Answer 4

为什么要这样做呢？渲染表格的时候直出就行了啊。先把数据的最大值找到，然后渲染的时候如果当前数据等于最大值就标红呗。
别说是在别人的页面上标红哈，那你直接复制到excel里面自动分析就行了。

如果你是有切换标红/不标状态的也一样，这个切换是控制的table的class，然后最大值的格子（比如<td class="isMaxValue">在table具有的class不同的时候具有不同的样式就好了。