JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<thead>
<tr>
<th>2010</th>
<th>2011</th>
<th>2012</th>
<th>2013</th>
<th>Totals</th>
</tr>
</thead>
<tbody>
<tr>
<td>10.5</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td class="total"></td>
</tr>
<tr>
<td>10</td>
<td>216</td>
<td>594</td>
<td>654</td>
<td class="total"></td>
</tr>
<tr>
<td>10</td>
<td>654</td>
<td>562</td>
<td>216</td>
<td class="total"></td>
</tr>
</tbody>
</table>
CSS
table {
margin: 20px 0;
}
table, td {
border: 1px solid #c0c0c0;
}
td {
padding: 3px 7px;
}
.total {
border-color: red;
}
JavaScript
$('tbody tr').each(function() {
row_total = 0;
$(this).find('td:not(.total)').each(function() {
row_total += parseInt($(this).text(), 10);
});
$('.total',this).text(row_total);
});