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

时间：2015-01-22 13:07:30

标签： javascript jquery html

我有下表，需要找到

  • 一个或多个 td 与班级＆＃34;总和＆＃34; 最高值（数字）
  • 一个或多个 td 与班级＆＃34;总和＆＃34; 第二高值（数字）
  • 添加课程＆＃34; text-bold＆＃34;匹配的tds

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>

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

Suma 12 3 15 15 12

其他可能的结果

Suma 0 0 0 10 0
Suma 12 3 15 7 9
Suma 1 3 15 15 12
Suma 12 3 15 9 12
Suma 4 4 4 4 4

3 个答案:

答案 0 :(得分：5)

实际上有点复杂，你必须得到一个包含.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');

FIDDLE

答案 1 :(得分：4)

好的，这需要我一段时间。使用以下代码查找最大数量很简单：

//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");
    }    
});

但是找到第二个最大值的棘手部分。我使用了来自这个问题stack的@Jack回答的代码，最终得到了这个结果：

＆＃13;
＆＃13; 
//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;
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：3)

我已经整理了以下jQuery函数来解决您的问题。它遍历值，确定最大值和第二大值，然后将“text-bold”类应用于表JSFiddle DEMO中的相关单元格

$(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;
}
相关问题
最新问题