Buscar temas sin respuesta | Ver temas activos Fecha actual 19 Ago 2017 23:26

Reglas del Foro


Es un foro abierto pero moderado, es decir que cualquier mensaje pasa por el moderador que borrará de inmediato todo lo que suene a spam.



Responder al tema  [ 2 mensajes ] 
 Como repetir funcion suma en varias filas 
Autor Mensaje
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>


04 Oct 2013 16:59
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>


10 Oct 2013 23:35
Mostrar mensajes previos:  Ordenar por  
Responder al tema   [ 2 mensajes ] 

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 1 invitado


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro

Buscar:
Saltar a:  
cron
Desarrollado por phpBB® Forum Software © phpBB Group
Designed by ST Software for PTF.
Traducción al español por Huan Manwë para phpBB-Es.COM