All geek questions in one place

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

I have the following table and you need to find

  • one or more td with the class "sum" with the highest value (number)
  • one or more td with the class "sum" with the second highest value (number)
  • add the text-bold class to the corresponding 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 above example, the result should look like this:

Suma 12 3 15 15 12

Other possible outcomes

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

+6
source share
3 answers

This is actually a bit complicated, you need to get an array with numbers from .sum elements, then find the largest number, then remove everything from the array, then find the next highest number and finally specify all elements containing these two numbers.

In code, it will 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

+5
source

Well, it will take me time. Finding the maximum number was 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; //compare the value with max value if (tdVal > max) { //change the font-weight when is max $(this).css("font-weight", "bold"); } });

But the hard part is to find the second max. I used the code from @Jack's answer from this stack question and came up with 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; //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>
+4
source

I 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 corresponding cells in the JSFiddle DEMO table

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

You also need to make a little adjustment to your CSS. the .text-bold class must have font-weight not text-weight .

 .text-bold { font-weight: 700; }
+3
source

Source: https://habr.com/ru/post/981397/

More articles:


All Articles