选择具有最高值/秒和第二高值/秒的表单元格

Select table cells with highest value/s and second highest value/s

本文关键字:高值 单元格 表单 最高值 选择      更新时间:2023-09-26

>我有下表,需要查找

  • 一个或多个TD,其类为"总和",具有最高值(数字)
  • 一个或多个TD,其类别为"sum",具有第二高值(数字)
  • 将类"文本粗体"添加到匹配的 TD 中

JSFiddle
法典

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.text-bold { font-weight: 700; }
table {
    margin: 16px 0;
    color:#333;
    border-width: 1px;
    border-color: #666;
    border-collapse: collapse;
}
table th {
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #666;
    background-color: #FBDD9B;
}
table td {
    border-width: 1px;
    padding: 4px;
    border-style: solid;
    border-color: #666;
    background-color: #fff;
}
</style>
</head>
<body>
    <table id="table-results">
        <tr>
            <th>Question</th>
            <th>inovation</th>
            <th>all-round</th>
            <th>coordination</th>
            <th>keeper</th>
            <th>analytic</th>
        </tr>
        <tr>
            <td>I.</td>
            <td>D=2</td>
            <td>A=1</td>
            <td>E=10</td>
            <td>C=8</td>
            <td>B=4</td>
        </tr>
        <tr>
            <td>II.</td>
            <td>A=6</td>
            <td>C=1</td>
            <td>B=2</td>
            <td>D=5</td>
            <td>E=1</td>
        </tr>
        <tr>
            <td>III.</td>
            <td>E=4</td>
            <td>B=1</td>
            <td>D=3</td>
            <td>A=2</td>
            <td>C=7</td>
        </tr>
        <tr>
            <td>Suma</td>
            <td class="sum">12</td>
            <td class="sum">3</td>
            <td class="sum">15</td>
            <td class="sum">15</td>
            <td class="sum">12</td>
        </tr>
    </table>
</body>
</html>

在上面的示例中,结果应如下所示

苏玛 12 3 15 1512

其他可能的结果

苏玛 0 0 0 10 0
苏玛 12 3 15 7 9
苏玛 1 3 15 1512
苏玛 12 3 15 9 12
苏玛 4 4 4 44

它实际上有点复杂,你必须从.sum元素中获取一个带有数字的数组,然后找到最高的数字,然后从数组中删除所有这些数字,然后找到下一个最高的数字,最后定位包含这两个数字的所有元素。

在代码中,这看起来像

var sum = $('.sum');
var arr = sum.map(function(_,x) { return +$(x).text() }).get();
var max = Math.max.apply( Math, arr );
var out = arr.filter(function(x) { return x != max });
var nxt = Math.max.apply( Math, out );
sum.filter(function() {
    var numb = +$(this).text();
    return numb == max || numb == nxt;
}).css('font-weight', 'bold');

小提琴

好的,

这需要我一段时间。使用以下代码查找最大数量有点容易:

//declare a variable for max taking the value of first td
var max = $("#table-results tr:last td:eq(1)").text();    
//iterate through the last row of the table
$("#table-results tr:last td").each(function () {
    //get the value of each td
    var tdVal = ~~this.innerHTML;
    //compare the value with max value
    if (tdVal > max) {
        //change the font-weight when is max
        $(this).css("font-weight", "bold");
    }    
});

但是找到第二个最大值的棘手部分。我使用了这个问题堆栈@Jack答案中的代码,最终得出了以下结果:

//declare a variable for max taking the value of first td
var max = $("#table-results tr:last td:eq(1)").text();
var arr = [];
//iterate through the last row of the table and keep the values in an array
$("#table-results tr:last td").each(function() {
  arr.push(~~this.innerHTML);
});
//get the second max from the array
var secMax = secondMax(arr);
//iterate through the last row of the table
$("#table-results tr:last td").each(function() {
  //get the value of each td
  var tdVal = ~~this.innerHTML;
  //compare the value with max value
  if (tdVal > max) {
    //change the font-weight when is max
    $(this).css("font-weight", "bold");
  }
  //comapre the second max value with the current one
  if (tdVal == secMax) {
    $(this).css("font-weight", "bold");
  }
});
function secondMax(arr) {
  ///with this function i find the second max value of the array
  biggest = -Infinity,
    next_biggest = -Infinity;
  for (var i = 0, n = arr.length; i < n; ++i) {
    var nr = +arr[i]; // convert to number first
    if (nr > biggest) {
      next_biggest = biggest; // save previous biggest value
      biggest = nr;
    } else if (nr < biggest && nr > next_biggest) {
      next_biggest = nr; // new second biggest value
    }
  }
  return next_biggest;
}
.text-bold {
  text-weight: 700;
}
table {
  margin: 16px 0;
  color: #333;
  border-width: 1px;
  border-color: #666;
  border-collapse: collapse;
}
table th {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #666;
  background-color: #FBDD9B;
}
table td {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #666;
  background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-results">
  <tr>
    <th>Question</th>
    <th>inovation</th>
    <th>all-round</th>
    <th>coordination</th>
    <th>keeper</th>
    <th>analytic</th>
  </tr>
  <tr>
    <td>I.</td>
    <td>D=2</td>
    <td>A=1</td>
    <td>E=10</td>
    <td>C=8</td>
    <td>B=4</td>
  </tr>
  <tr>
    <td>II.</td>
    <td>A=6</td>
    <td>C=1</td>
    <td>B=2</td>
    <td>D=5</td>
    <td>E=1</td>
  </tr>
  <tr>
    <td>III.</td>
    <td>E=4</td>
    <td>B=1</td>
    <td>D=3</td>
    <td>A=2</td>
    <td>C=7</td>
  </tr>
  <tr>
    <td>Suma</td>
    <td class="sum">12</td>
    <td class="sum">3</td>
    <td class="sum">15</td>
    <td class="sum">15</td>
    <td class="sum">12</td>
  </tr>
</table>

我整理了以下jQuery函数来解决您的问题。它遍历值,确定最大值和第二大值,然后将"文本粗体"类应用于表中的相关单元格 JSFiddle 演示

$(function(){
  //set initial values
    var largest = 0;
    var second = 0;
  //fetch the td elements with sum class
    var $sums = $('td.sum');
  //iterate through to find the values that represent largest and second
    $sums.each(function(){
      //set value of cell to variable for comparison (parsed to ensure it is a number)
        var value = parseInt($(this).text());
        if(largest == 0) { largest = value; }
        else if(value > largest) { 
            second = largest;
            largest = value;
        }
        else if(value == largest) {  }  //this prevents second from being overwritten by a duplicate largest value
        else if(value > second) { 
            second = value;
        }
        else {  }
    });
  //iterate through again bolding the largest and second largest values
  //had to use this method because values can exist more than once
    $sums.each(function(){
        if($(this).text() == largest || $(this).text() == second) {
            $(this).addClass("text-bold");
        }
    });
});

您还需要对 CSS 进行轻微调整。 .text-bold类应该font-weight未分配text-weight

.text-bold {
    font-weight: 700;
}