<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td width="200">работы</td>
<td width="100">цена</td>
<td width="100">кол-во</td>
<td width="150">сумма</td>
</tr>
<tr>
<td colspan="4" style="text-align: center;">тип 1</td>
</tr>
<tr>
<td width="200">Наименование ...</td>
<td width="100">1000 руб</td>
<td width="100" onclick="edit(this);">0</td>
<td width="150" class="group1">0</td>
</tr>
<tr>
<td width="200">Наименование ...</td>
<td width="100">1000 руб</td>
<td width="100" onclick="edit(this);">0</td>
<td width="150" class="group1">0</td>
</tr>
<tr>
<td colspan="3">Итого</td>
<td class="group1_total">0</td>
</tr>
<tr>
<td colspan="4" style="text-align: center;">тип 2</td>
</tr>
<tr>
<td width="200">Наименование ...</td>
<td width="100">1000 руб</td>
<td width="100" onclick="edit(this);">0</td>
<td width="150" class="group2">0</td>
</tr>
<tr>
<td width="200">Наименование ...</td>
<td width="100">1000 руб</td>
<td width="100" onclick="edit(this);">0</td>
<td width="150" class="group2">0</td>
</tr>
<tr>
<td colspan="3" class="group2_total">Итого</td>
<td>0</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function edit(ths)
{
$(ths).attr('onclick', '');
$(ths).html('<input class="edit" type="text" value="' + $(ths).html() + '">');
var edit = $('.edit');
$(edit).focus();
$(edit).on('blur', blurElit);
}
function blurElit()
{
var parent = $(this).parent();
var value = $(this).val();
var prev_val = parseInt($(parent).prev().html());
$(parent).html(value);
$(parent).attr('onclick', 'edit(this)');
$(parent).next().html((prev_val * value) + ' руб');
var clas = $(parent).next().attr('class');
var total = 0;
$('.' + clas).each(function(ind, val)
{
total += parseInt($(val).html());
});
$('.' + clas + '_total').html(total + ' руб');
}
</script>
</body>
</html>