Deseo sumar los valores de las filas de una matriz dinámica, pero al realizar la suma solo me hace el calculo en una sola celda, he intentado de varias formas pero no logro realizar lo que deseo, que es sumar solo el valor de las filas individualmente.
Cuando se realiza el pedido de la cantidad de elementos que contrendra la tabla se generan los inputs sin ningún problema, la cuestión es que al momento de realizar la suma de cada uno de los campos de la tabla me genera una sola suma y necesito realizar la suma por filas individualmente
<html>
<head>
<title>Suma de Zonas</title>
<script>
function calculo(valor){
var total = 0;
valor = parseInt(valor);
total = document.getElementById('spTotal').innerHTML;
total = (total == null || total == undefined || total == "") ? 0 : total;
var total=(parseInt(total) + parseInt(valor))
document.getElementById('spTotal').innerHTML = total;
}
function crear(){
var col = document.getElementById("cols").value;
var filas = document.getElementById("cols").value;
var tabla="<table border=\"1\" id=\"miTabla\">";
tabla+="<tr><td>Zona</td>";
for(j=0;j<col;j++){
tabla+="<td>"+(j+1)+"</td>";
}
tabla+="<td>Total</td>";
tabla+="</tr>";
for(i=0;i<filas;i++){
tabla+="<tr>";
tabla+="<td>"+(i+1)+ "</td>";
for(j=0;j<col;j++){
tabla+="<td>"+'<input type=\"text\" size=\"1\" id=\"txt_campo"\"
onchange=\"calculo(this.value);\"/>'+ "</td>";
}
tabla+="<td id=\"spTotal\"></span></td>";
tabla+="</tr>";
}
tabla+="</table>";
document.getElementById('resultado').innerHTML=tabla;
}
function crear2() {
document.getElementById('resultado').innerHTML="";
}
</script>
</head>
<body>
<form>
<input type="text" id="cols" /> Cantidad de Zonas <br />
<input type="button" id="enviar" value="crear tabla" onclick="crear()"/>
<input type="button" id="limpiar" value="Limpiar" onclick="crear2()"/>
</form>
<div id="resultado"></div>
</body>
</html>