Los Foros
http://foros.espaciolatino.com/

Como repetir funcion suma en varias filas
http://foros.espaciolatino.com/viewtopic.php?f=2&t=486
Página 1 de 1

Autor:  placks73 [ 04 Oct 2013 16:59 ]
Asunto:  Como repetir funcion suma en varias filas

Buen dia,

Necesito repetir la operacion de suma en cada columna que se va agregando en este codigo solo se ejecuta en la primera fila.

Agradezco su pronta ayuda

<html>
<head>
<title>Hoja de Tiempo</title>


<script language="javascript" type="text/javascript"> /* Abrimos etiqueta de código Javascript */

/* Partimos por definir una variable llamada posicionCampo.
Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente.
La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */

var posicionCampo=2; /* Declaramos la función agregarUsuario( ) */
function agregarUsuario(){ /* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento
HTML designado por no?
el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la
función insertRow para agregar una fila */
nuevaFila = document.getElementById("tablaregistro").insertRow(-1); /* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo,
que inicializamos en 1 */

nuevaFila.id=posicionCampo; /* Luego en otra variable llamada nuevaCelda, agregaremos una celda a la tabla, mediante la función insertCell */
nuevaCelda=nuevaFila.insertCell(-1); /* Con la celda creada, insertamos dinámicamente un campo de texto, el cual almacenaremos en un array
llamado nombre, con una posición equivalente a la variable posicionCampo. Una vez terminado, repetimos la acción para el sitio Web y correo, asignando al array respectivo */
nuevaCelda.innerHTML="<td><input type='text' size='50' name='actividad["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='10' style='text-align:center' name='division["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='oco["+posicionCampo+"]' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='lunes["+posicionCampo+"]' id='lunes' value='0' onChange='sumar()' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='martes["+posicionCampo+"]' id='martes' value='0' onChange='sumar()' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='miercoles["+posicionCampo+"]' id='miercoles' value='0' onChange='sumar()' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='jueves["+posicionCampo+"]' id='jueves' value='0' onChange='sumar()' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='viernes["+posicionCampo+"]' id='viernes' value='0' onChange='sumar()'></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='sabado["+posicionCampo+"]' id='sabado' value='0' onChange='sumar()' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='domingo["+posicionCampo+"]' id='domingo' value='0' onChange='sumar()'></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='15' style='text-align:center' name='total_horas["+posicionCampo+"]' id='total' disabled style='text-align:center' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);


nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>"; /* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
posicionCampo++; } /* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
function eliminarUsuario(obj){ var oTr = obj;
while(oTr.nodeName.toLowerCase()!='tr'){ oTr=oTr.parentNode; }
var root = oTr.parentNode; root.removeChild(oTr); }
/* Cerramos el código Javascript */
</script>


<script>
function sumar() {
valor1 = document.getElementById("lunes").value;
valor2 = document.getElementById("martes").value;
valor3 = document.getElementById("miercoles").value;
valor4 = document.getElementById("jueves").value;
valor5 = document.getElementById("viernes").value;
valor6 = document.getElementById("sabado").value;
valor7 = document.getElementById("domingo").value;
total = parseFloat(valor1) + parseFloat(valor2) + parseFloat(valor3) + parseFloat(valor4) + parseFloat(valor5) + parseFloat(valor6) + parseFloat(valor7);

document.getElementById("total_horas").value= total;
}


</script>


</head>

<body>

<form action="" method="post" name="form1" >

<h1 ALIGN=center class="style3">HORAS TRABAJADAS</h1>
<br>

<TABLE border="0" width="80%" ALIGN="center" cellpadding="3" cellspacing="3" id="tablaregistro">
<tr>
<td WIDTH=p><div align="center" class="style1">PROYECTO / ACTIVIDAD</div></td>
<td WIDTH=p ><div align="center" class="style1">DIVISION</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">OCO</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">LUN</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">MAR</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">MIER</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">JUE</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">VIE</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">SAB</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">DOM</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">TOTAL HORAS</div></td>
</tr>

<TR>
<TD> <input type="text" size="50" style="text-align:center" name="actividad[1]"> </TD>
<TD> <input type="text" size="10" style="text-align:center" name="division[1]"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="oco[1]"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="lunes[1]" id="lunes[]" value="0" onChange="sumar()"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="martes[1]" id="martes[]" value="0" onChange="sumar()"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="miercoles[1]" id="miercoles[]" value="0" onChange="sumar()"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="jueves[1]" id="jueves[]" value="0" onChange="sumar()"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="viernes[1]" id="viernes[]" value="0" onChange="sumar()"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="sabado[1]" id="sabado[]" value="0" onChange="sumar()"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="domingo[1]" id="domingo[]" value="0" onChange="sumar()"> </TD>
<TD> <input type="text" size="15" style="text-align:center" name="total_horas[1]" id="total[]" disabled style="text-align:center"> </TD>


</TR>

</TABLE>
<br>

<td align="left"><INPUT onclick="agregarUsuario()" value="Agregar Registro" type="button"></td>

<br>

<input type="submit" value="Guardar">

<br>
</form>
</body>
</html>

Autor:  Juan [ 10 Oct 2013 23:35 ]
Asunto:  Re: Como repetir funcion suma en varias filas

Pues así lo que yo veo es que tienes controles con id repetidos y eso es lo que no te deja que funcione el código y además la función suma solo actua sobre la primera fila, no le envías argumentos ni nada para que cambie de fila.
Agrega cada nuevo campo con un id de la fila (el posicionCampo) y llama a suma con ese valor como argumento. Bueno el código funcionando es este que sigue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hoja de Tiempo</title>


<script language="javascript" type="text/javascript"> /* Abrimos etiqueta de código Javascript */

/* Partimos por definir una variable llamada posicionCampo.
Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente.
La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */

var posicionCampo=2; /* Declaramos la función agregarUsuario( ) */
function agregarUsuario(){ /* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento
HTML designado por no? el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la
función insertRow para agregar una fila */
nuevaFila = document.getElementById("tablaregistro").insertRow(-1); /* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo,
que inicializamos en 1 */

nuevaFila.id=posicionCampo; /* Luego en otra variable llamada nuevaCelda, agregaremos una celda a la tabla, mediante la función insertCell */
nuevaCelda=nuevaFila.insertCell(-1); /* Con la celda creada, insertamos dinámicamente un campo de texto, el cual almacenaremos en un array
llamado nombre, con una posición equivalente a la variable posicionCampo. Una vez terminado, repetimos la acción para el sitio Web y correo, asignando al array respectivo */
nuevaCelda.innerHTML="<td><input type='text' size='50' name='actividad["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='10' style='text-align:center' name='division["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='oco["+posicionCampo+"]' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='lunes["+posicionCampo+"]' id='lunes"+posicionCampo+"' value='0' onChange='sumar("+posicionCampo+")' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='martes["+posicionCampo+"]' id='martes"+posicionCampo+"' value='0' onChange='sumar("+posicionCampo+")' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='miercoles["+posicionCampo+"]' id='miercoles"+posicionCampo+"' value='0' onChange='sumar("+posicionCampo+")' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='jueves["+posicionCampo+"]' id='jueves"+posicionCampo+"' value='0' onChange='sumar("+posicionCampo+")' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='viernes["+posicionCampo+"]' id='viernes"+posicionCampo+"' value='0' onChange='sumar("+posicionCampo+")'></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='sabado["+posicionCampo+"]' id='sabado"+posicionCampo+"' value='0' onChange='sumar("+posicionCampo+")' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='8' style='text-align:center' name='domingo["+posicionCampo+"]' id='domingo"+posicionCampo+"' value='0' onChange='sumar("+posicionCampo+")'></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='15' style='text-align:center' name='total_horas["+posicionCampo+"]' id='total"+posicionCampo+"' disabled style='text-align:center' ></td>"; /* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);


nuevaCelda.innerHTML="<td><input type='button' value='Eliminar' onclick='eliminarUsuario(this)'></td>"; /* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
posicionCampo++; } /* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
function eliminarUsuario(obj){ var oTr = obj;
while(oTr.nodeName.toLowerCase()!='tr'){ oTr=oTr.parentNode; }
var root = oTr.parentNode; root.removeChild(oTr); }
/* Cerramos el código Javascript */

function sumar(i) {
valor1 = document.getElementById("lunes"+i).value;
valor2 = document.getElementById("martes"+i).value;
valor3 = document.getElementById("miercoles"+i).value;
valor4 = document.getElementById("jueves"+i).value;
valor5 = document.getElementById("viernes"+i).value;
valor6 = document.getElementById("sabado"+i).value;
valor7 = document.getElementById("domingo"+i).value;
total = parseFloat(valor1) + parseFloat(valor2) + parseFloat(valor3) + parseFloat(valor4) + parseFloat(valor5) + parseFloat(valor6) + parseFloat(valor7);

document.getElementById("total"+i).value= total;
}


</script>


</head>

<body>

<form action="" method="post" name="form1" >

<h1 ALIGN=center class="style3">HORAS TRABAJADAS</h1>
<br>

<TABLE border="0" width="80%" ALIGN="center" cellpadding="3" cellspacing="3" id="tablaregistro">
<tr>
<td WIDTH=p><div align="center" class="style1">PROYECTO / ACTIVIDAD</div></td>
<td WIDTH=p ><div align="center" class="style1">DIVISION</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">OCO</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">LUN</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">MAR</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">MIER</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">JUE</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">VIE</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">SAB</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">DOM</div></td>
<td WIDTH=p height="29"><div align="center" class="style1">TOTAL HORAS</div></td>
</tr>

<TR>
<TD> <input type="text" size="50" style="text-align:center" name="actividad[1]"> </TD>
<TD> <input type="text" size="10" style="text-align:center" name="division[1]"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="oco[1]"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="lunes[1]" id="lunes1" value="0" onChange="sumar(1)"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="martes[1]" id="martes1" value="0" onChange="sumar(1)"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="miercoles[1]" id="miercoles1" value="0" onChange="sumar(1)"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="jueves[1]" id="jueves1" value="0" onChange="sumar(1)"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="viernes[1]" id="viernes1" value="0" onChange="sumar(1)"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="sabado[1]" id="sabado1" value="0" onChange="sumar(1)"> </TD>
<TD> <input type="text" size="8" style="text-align:center" name="domingo[1]" id="domingo1" value="0" onChange="sumar(1)"> </TD>
<TD> <input type="text" size="15" style="text-align:center" name="total_horas[1]" id="total1" disabled > </TD>


</TR>

</TABLE>
<br>

<td align="left"><INPUT onclick="agregarUsuario()" value="Agregar Registro" type="button"></td>

<br>

<input type="submit" value="Guardar">

<br>
</form>
</body>
</html>

Página 1 de 1 Todos los horarios son UTC + 1 hora
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/