JSFiddle - React, Tailwind, and code Playground

by Alejandro

HTML

<p>Rule: Compare both years to determine if 2013 had an increase in profit. Green is positive and red is negative.</p>
<table>
	<thead>
    	<tr>
        	<th>2012 Profits</th>
            <th>2013 Profits</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>$100,870</td>
            <td>$100,980</td>
            <td class="total">$201,850</td>
        </tr>
    	<tr>
        	<td>$135,000</td>
            <td>$180,000</td>
            <td class="total">$315,000</td>
        </tr>
    	<tr>
        	<td>$104,000</td>
            <td>$102,100</td>
            <td class="total">$206,100</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-left: 1px solid #c0c0c0;
    border-top: 1px solid #c0c0c0;
    border-collapse: collapse;
}
td, th {
    padding: 5px;
    border-bottom: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
}
th {
    background-color: #f1f1f1;
}

JavaScript

$(".total").each(function() {
    var year1 = parseInt($(this).prev().prev().text().replace(/[^0-9\.]+/g,""), 10);
    var year2 = parseInt($(this).prev().text().replace(/[^0-9\.]+/g,""), 10);
    if (year1 > year2) {
        $(this).css({'color': 'red'});
    } else {
        $(this).css({'color': 'green'});
    }
});

// parseInt is essential! When you grab numbers from the DOM they're considered strings. They need to be parsed as an integer so that jQuery can perform calculations with them.

// replace(/[^0-9\.]+/g,"") ...this removes any symbols that aren't a period. In this case, we're removing the dollar sign and comma.