jQuery – Find smallest value in table row and style it

First of all – I’m very new to jQuery/JS

I have a website which displays sports results. There are 6 tournaments each year, but only the 4 best results are used for the ranking.

I have a table on the website which is filled via jQuery from google spreadsheets (via sheetrock).

The table looks like this:

$('tr').each(function(){
        var vals = $('td:nth-child(n+3):nth-last-child(n+2)',this).map(function () {
            return parseInt($(this).text()) ? parseInt($(this).text()) :  null;
        }).get();
        var min = Math.min.apply(Math, vals);

        $('td:nth-child(n+3):nth-last-child(n+2)', this).filter(function () {
            return parseInt($(this).text()) === min;
        }).css('text-decoration', 'line-through');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
    <th>Rang</th>
    <th>Team</th>
    <th>KC</th>
    <th>ZB</th>
    <th>BVO</th>
    <th>BW</th>
    <th>MC</th>
    <th>BB</th>
    <th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>Eckl/Lak</td>
    <td>100</td>
    <td>100</td>
    <td>100</td>
    <td></td>
    <td>100</td>
    <td></td>
    <td>400</td>
</tr>
  <tr>
    <td>2</td>
    <td>Pointner/Wimmer J.</td>
    <td>70</td>
    <td></td>
    <td>50</td>
    <td>50</td>
    <td>70</td>
    <td>80</td>
    <td>220</td>
</tr>
  <tr>
    <td>3</td>
    <td>Grießler/Svetanic</td>
    <td>56</td>
    <td></td>
    <td>62</td>
    <td>40</td>
    <td></td>
    <td>40</td>
    <td>198</td>
</tr>
</tbody>
</table>

All I want to do now is to let jQuery check each row of the table if there are more than 4 results. If there are more than 4 I’d like to line-through the smallest value.

I use this to identify the rows with more than 4 results:

$('table tr').filter(function() {
        return $(this).children('td:empty').length < 2;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

To style the cells I use this:

$('tr').each(function(){
        var vals = $('td:nth-child(n+3):nth-last-child(n+2)',this).map(function () {
            return parseInt($(this).text()) ? parseInt($(this).text()) :  null;
        }).get();
        var min = Math.min.apply(Math, vals);

        $('td:nth-child(n+3):nth-last-child(n+2)', this).filter(function () {
            return parseInt($(this).text()) === min;
        }).css('text-decoration', 'line-through');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But there are a few things that obviously aren’t working.

Currently, it identifies all the minimum values for each row. Hence, if there are multiple minimum values it also styles every min-value and not only one of them.

Also I don’t know how to incorporate this in an if-statement.

I was really hoping that somebody could help me out here.

To find minimum in whole table

var vals = $('tr td').map(function () {
    return isNaN(parseInt($(this).text(), 10)) ? parseInt($(this).text(), 10) :  null;
}).get();

// then find their minimum
var min = Math.min.apply(Math, vals);

// tag any cell matching the min value
$('tr td').filter(function () {
    return parseInt($(this).text(), 10) === min;
}).addClass('alert alert-danger');

To find minimum in each row

$('tr').each(function(){
    var vals = $('td,th',this).map(function () {
        return parseInt($(this).text(), 10) ? parseInt($(this).text(), 10) :  null;
    }).get();
    // then find their minimum
    var min = Math.min.apply(Math, vals);

    // tag any cell matching the min value
    $('td,th', this).filter(function () {
        return parseInt($(this).text(), 10) === min;
    }).addClass('alert alert-danger');
});

you should check this out- https://stackoverflow.com/a/22470186/1665370