Conditional Icon Indicator In Table Cell

This code makes a table cell's icons change based on the number within.

by Avinashullal

HTML

<!--This is for Arrow icons-->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />

<table class="asd" class="content bordered" border="3" cellspacing="2" cellpadding="3" valign="top">
    <tbody>
        <tr height="30">
            <th align="middle">Project Title</th>
            <th align="middle">MS Achieved</th>
            <th align="middle">SCP-KPI Status</th>
            <th align="middle">SCP-TRN</th>
            <th>sasa</th>
            <th>sdad</th>
            <th>asdas</th>
            <th>dasd</th>
        </tr>
        <tr>
            <td>Louis Armstrong</td>
            <td>Blah</td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition">20</td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition"></td>
        </tr>
        <tr>
            <td>Bob Barker</td>
            <td>Blah</td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition">10</td>
            <td class="stopGapCondition red"></td>
            <td class="stopGapCondition yellow"></td>
            <td class="stopGapCondition yellow"></td>
            <td class="stopGapCondition green"></td>
        </tr>
        <tr>
            <td>David Brinkley</td>
            <td>1Blah</td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition">30</td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition"></td>
        </tr>
        <tr>
            <td>Tom Brokaw</td>
            <td>10Blah4</td>
            <td class="stopGapCondition"></td>
            <td class="stopGapCondition">10</td>
            <td class="stopGapCondition"></td>
            <td...

CSS

.red {
    color: #d9534f;
}
.yellow {
    color: #f0ad4e;
}
.green {
    color: #5cb85c;
}

JavaScript

$('.asd > tbody  > tr').not(':first').find('td:nth-child(4)').each(function () {
    var sh = $(this).text();
    if (sh == 10) {
        $(this).html('<i class="fa fa-arrow-down red"></i>');
    } else if (sh == 30) {
        $(this).html('<i class="fa fa-arrow-up green"></i>');
    } else if (sh == 20) {
        $(this).html('<i class="fa fa-arrow-right yellow"></i>');
    }
});