Como decimos por aquí "Más vale una imagen que cien palabras". Así que me guiaré por la imagen
Código Javascript
:
Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<style>
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
new foo();
}, false);
function foo() {
this.dato1 = document.querySelectorAll('input[name="dato1[]"]');
this.dato2 = document.querySelectorAll('input[name="dato2[]"]');
this.suma = document.querySelectorAll('div[name="test[]"]');
var _this = this;
[].forEach.call(_this.dato1, function(campo, indice) {
campo.addEventListener('keyup', function() {
_this.calcular(indice);
}, false);
_this.dato2[indice].addEventListener('keyup', function() {
_this.calcular(indice);
}, false);
})
}
foo.prototype.calcular = function(i) {
var dato1 = parseFloat(this.dato1[i].value) || 0,
dato2 = parseFloat(this.dato2[i].value) || 0;
this.suma[i].textContent = dato1 + dato2;
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="text" name="dato1[]" value="0" size="12"></td>
<td><input type="text" name="dato2[]" value="0" size="12"></td>
<td><div name="test[]"> </div></td>
</tr>
<tr>
<td><input type="text" name="dato1[]" value="0" size="12"></td>
<td><input type="text" name="dato2[]" value="0" size="12"></td>
<td><div name="test[]"> </div></td>
</tr>
</table>
</body>
</html>