Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Como repetir funcion suma en varias filas

JavaScript - Como repetir funcion suma en varias filas

Volver
Nuevo Tema
<<>>
 
Vista:

Como repetir funcion suma en varias filas

Publicado por Desiree Gonzalez (2 intervenciones) el 04/10/2013 17:49:24
Buen dia,

Necesito ayuda para repetir la suma de este codigo cada vez que agrego una nueva fila.

Agradezco su pronta ayuda

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<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>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como repetir funcion suma en varias filas

Publicado por xve (2100 intervenciones) el 05/10/2013 09:51:39
Hola Desiree, te agradezco mucho que nos muestres todo el código, pero no entiendo muy bien que necesitas... tu explicación no me queda clara....nos puedes comentar con mas detalle?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar