javascript - Select table cells with highest values and second highest values

I have the following table and need to find

one or more td with the class "sum" with highest value (number)
one or more td with the class "sum" with second highest value (number)
add class "text-bold" to the matching tds

JSFiddle
code

<!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>

In the example above the result should look like this

Suma 12 3 15 15 12

Other possible results

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

I have the following table and need to find

one or more td with the class "sum" with highest value (number)
one or more td with the class "sum" with second highest value (number)
add class "text-bold" to the matching tds

JSFiddle
code

<!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>

In the example above the result should look like this

Suma 12 3 15 15 12

Other possible results

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

Share Improve this question edited Jan 22, 2015 at 13:47 asked Jan 22, 2015 at 13:07 Noga 1872 silver badges9 bronze badges

5 Could you show us what you've tried so far? – Thor Jacobsen Commented Jan 22, 2015 at 13:09
Your jsfiddle only has the HTML and CSS, no attempts – Popnoodles Commented Jan 22, 2015 at 13:10
from where your data is ing. It can be done with js jq php bt not witsh css – Rahul Commented Jan 22, 2015 at 13:10
You will need to loop it anyway to identify which columns have the 2 highest values. Now go write some code doing that ... – Laurent S. Commented Jan 22, 2015 at 13:11
I edited the question. There was a mistake in the css and changed jsfiddle with the code I have so far, which finds only highest number – Noga Commented Jan 22, 2015 at 13:49

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

It's actually a little bit plicated, you have to get an array with the numbers from the .sum elements, then find the highest number, then remove all those from the array, then find the next highest number, and finally target all elements containing those two numbers.

In code, that would look like

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

Ok this take me a while. To find max number was kinda easy using the following code:

//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;
    //pare the value with max value
    if (tdVal > max) {
        //change the font-weight when is max
        $(this).css("font-weight", "bold");
    }    
});

But the tricky part to find second max. I used code from @Jack answer from this question stack and ended up to this result:

//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;
  //pare the value with max value
  if (tdVal > max) {
    //change the font-weight when is max
    $(this).css("font-weight", "bold");
  }
  //apre 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./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>

I have put together the following jQuery function to solve your problem. It iterates through the values, determines the largest and second largest values then applies the `text-bold' class to the relevant cells in the table 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 parison (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");
        }
    });
});

You also need to make a slight adjustment to your CSS. the .text-bold class should have font-weight not text-weight assigned.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Select table cells with highest values and second highest values - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)