birt, смотрите весь код внимательно!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: list;
}
#v_table tbody tr td:nth-child(1):before{
position: absolute;
display: block;
margin-top: -12px;
counter-increment: list;
content: counter(list);
color: #000000;
}
#v_table tbody tr td:nth-child(1){
width: 20px;
}
#v_table span{
margin-left: 15px;
text-align: center;
font-size: 28px;
cursor: pointer;
}
</style>
</head>
<body>
<table id="v_table">
<tbody>
<tr>
<td></td><td><input type="text" class="nep"></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2"><center><button onclick="add_value_f()">+</button></center></td></tr>
<tr><td colspan="2"><center><input type="text" name="sum" id="sum"></td></tr>
</tfoot>
</table>
<script>
var d = document;
function add_value_f() {
var tbody = d.getElementById("v_table").getElementsByTagName("tbody")[0];
var row = d.createElement("tr");
tbody.appendChild(row);
var td1 = d.createElement("td");
var td2 = d.createElement("td");
row.appendChild(td1);
row.appendChild(td2);
td2.innerHTML = '<input type="text" class="nep">'
var span = d.createElement("span");
span.innerHTML='-';
span.addEventListener("click", function() {tbody.removeChild(row)})
td2.appendChild(span)
}
var table = d.getElementById("v_table"),
sum = d.getElementById("sum");
table.addEventListener("input", function() {
sum.value = [].reduce.call(table.querySelectorAll('.nep'), function(summ, item) {
return summ += +item.value || 0
}, 0)
});
</script>
</body>
</html>