Можно сделать так.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table{
background: #FFF7BF;
border-spacing: 0px;
border: 1px solid #f00;
}
table td, table th{
padding: 10px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<form action="/" method="post">
<table id="myTable"></table>
</form>
<div>Итого <span id="total">0</span></div>
<script>
(function(){
var addEvent = function(el, type, callback){
if (document.addEventListener){
el.addEventListener(type, callback, false);
} else if (document.attachEvent){
el.attachEvent('on' + type, function(event){
callback.call(el, event);
})
}
};
var data = [{
name: 'Картофель',
key: 'potato',
price: 50
},{
name: 'Капуста',
key: 'cabbage',
price: 150
},{
name: 'Лук',
key: 'bow',
price: 350
},{
name: 'Морковь',
key: 'carrot',
price: 30
},{
name: 'Свекла',
key: 'beet',
price: 92
},{
name: 'Редька',
key: 'radish',
price: 20
},{
name: 'Редис',
key: 'radishes',
price: 120
}];
var table = document.getElementById('myTable');
var totalElement = document.getElementById('total');
var html = [], item, total = 0;
html.push('<tr>');
html.push('<th>Наименование работ</th>');
html.push('<th>Цена за кг.</th>');
html.push('<th>Колличество кг.</th>');
html.push('<th>Сумма</th>');
html.push('</tr>');
for (var i = 0, len = data.length; i < len; i+=1){
item = data[i];
html.push('<tr>');
html.push('<td>'+ item.name +'</td>');
html.push('<td>'+ item.price +'</td>');
html.push('<td><input data-key="'+ item.key +'" data-price="'+ item.price +'" type="text" name="count_'+ item.key +'" value="0"></td>');
html.push('<td><span id="count_'+ item.key +'">0</span><input data-total="1" type="hidden" id="'+ item.key +'" name="price_'+ item.key +'"></td>');
html.push('</tr>');
}
table.innerHTML = html.join('');
var inTotal = function(){
var number = 0;
var total = Array.prototype.slice.call(table.getElementsByTagName('input'));
var item, price, value;
for (var i = 0, len = total.length; i < len; i+=1){
item = total[i];
price = +item.getAttribute('data-total');
if (price){
value = +item.value;
number += value;
}
}
return number;
};
var inputEvent = function(e){
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'input'){
var name = target.getAttribute('name');
var key = target.getAttribute('data-key');
var price = +target.getAttribute('data-price');
var value = +target.value;
var result = price * value;
var summa = document.getElementById(name);
var hiddenInput = document.getElementById(key);
summa.innerHTML = result;
hiddenInput.value = result;
totalElement.innerHTML = inTotal();
}
};
addEvent(table, 'change', inputEvent);
addEvent(table, 'keyup', inputEvent);
})();
</script>
</body>
</html>