The total column cell should not be editable, so a plain text cell will do
<td class="total"></td>
then, use jQuery to calculate and update the row sum either onload or onblur:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").each(function() {
var that = $(this);
// sum and display total column
sumUp(that);
// bind onblur to each input text cell
$(this).blur(function(){
sumUp(that);
});
});
});
function sumUp(obj) {
var sum = 0;
var focusedRow = obj.closest('tr');
focusedRow.find('input:text').each( function(){
sum += parseFloat(this.value);
});
focusedRow.find('td.total').html(sum);
}
</script>
</head>
Reference:
https://learn.jquery.com/events/event-basics/[
^]