CODEWITHSUNDEEP
jquery
Alen
Alen

Reputation: 1291

Comparing and selecting the row having highest value in jquery

I am trying to select the td which has the highest value and mark it with a tick.

For instance I have 

<td class="info">55</td>
<td class="info">66</td>
<td class="info">44</td>

Now when I try to take the value from the tds it just shows the first one

 $(document).ready(function(e)
 {
    var value = $(".info").text();
    alert(value);
 });

Can anyone tell me how to begin it with? how to get data and process it?

Upvotes: 1

Views: 1015

Answers (2)

trincot
trincot

Reputation: 350335

The text method always returns the text content of the first matching element, ignoring all the others.

To look at all of them, use map, returning for each element the text value, converted to number (with +). Then convert the resulting jQuery collection to a plain array with get(). Then it is easy to get the maximum value, its position, and target it with jQuery's eq():

$(document).ready(function() {
  var values = $(".info").map(function () {
    return +$(this).text(); // convert to number
  }).get(); // convert to array
  // Get the maximum value
  var max = Math.max.apply(Math, values);
  // Get position of where the maximum value is
  var index = values.indexOf(max);
  // Apply marking
  $(".info").eq(index).addClass('tick');
});
.tick { background: yellow }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="info">55</td>
    <td class="info">66</td>
    <td class="info">44</td>
  </tr>
</table>

If you have multiple rows of which you need to highlight the greatest value, create a function that accepts a selector:

function highlightGreatest(selector) {
  var values = $(selector).map(function () {
    return +$(this).text(); // convert to number
  }).get(); // convert to array
  // Get the maximum value
  var max = Math.max.apply(Math, values);
  // Get position of where the maximum value is
  var index = values.indexOf(max);
  // Apply marking
  $(selector).eq(index).addClass('tick');
}

$(document).ready(function() {
    highlightGreatest('.info');
    highlightGreatest('.info2');
});
.tick { background: yellow }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="info">55</td>
    <td class="info">66</td>
    <td class="info">44</td>
  </tr>
  <tr>
    <td class="info2">55</td>
    <td class="info2">66</td>
    <td class="info2">144</td>
  </tr>
</table>

Upvotes: 1

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

var max = 0,
  el, val;
$(".info").each(function() {
  val = parseInt($(this).text());
  if (val > max) {
    max = val;
    el = $(this);
  }
});

console.log(el);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="info">55</td>
      <td class="info">66</td>
      <td class="info">44</td>
    </tr>
    <tbody>
</table>

Youll have to convert the text to integer values before comparing.

function compare() {
  var max=0,el,val;
  $(".info").each(function(){
     val = parseInt($(this).text());
     if(val>max) {
       max = val;
       el = $(this);
     }
  });
  return el;
}

Upvotes: 1

Related Questions