Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Crear y llenar array multidimensional Javascript a partir de html generado con ciclos PHP

JavaScript - Crear y llenar array multidimensional Javascript a partir de html generado con ciclos PHP

Volver
Nuevo Tema
<<>>
 
Vista:

Crear y llenar array multidimensional Javascript a partir de html generado con ciclos PHP

Publicado por Freddy (2 intervenciones) el 02/07/2015 21:00:00
Buenas, estoy tratando de construir una matriz con javascript para validar los valores ingresados en unos input generados a traves de codigo php y realmente se me ha complicado la cuestión. Si alguien puede ayudarme...

El codigo es mas o menos el siguiente:

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
<form action="xxxx.php" id="insertar" method="post">
    <table>
        <?php
            $plancha=1;
            $_SESSION["cantidad_plancha"]=count($eleccion->plancha);
            foreach($eleccion->plancha as $planchas)
            {
        ?>
        <tr>
            <td class="voto_manual_plancha"> <?=$planchas->nombre?></td>
            <td>
                <input id="voto<?=$plancha?>" type="text" size="5" maxlength="5" value="0" class="required number " onChange="actualizar_plancha_en_matriz()";>
            </td>
        </tr>
        <?php
            $candidato=1;
            $_SESSION["nombre_plancha".$plancha]=$planchas->nombre;
            $_SESSION["plancha_id".$plancha]=$planchas->id;
            $_SESSION["cantidad_candidatos".$plancha]= count($planchas->candidato);
            foreach($planchas->candidato as $candidatos)
            {
                $_SESSION["candidato_id".$plancha.$candidato]= $candidatos->id;
        ?>
                <tr>
                    <td  class="voto_manual_candidato">
                    <?php
                        $nombre_candidato=$candidatos->get_nombre();
                        echo " - ".$nombre_candidato
                    ?>
                    </td>
                    <td>
                        <input style="width:50px;" name="voto<?=$plancha.$candidato?>" id="voto<?=$plancha.$candidato?>" type="text" size="5" maxlength="5" value="0" class="required number" onChange="actualizar_cand_en_matriz();">
                    </td>
                </tr>
        <?php
                $candidato++;
            }
            $plancha++;
            }
        ?>
        </table>
 
    <input id="cargar" onClick="return validar();" type="submit" value="Cargar" />
</form>

Y esto genera un codigo html como el siguiente:

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
<table>
    <tbody>
        <tr>
            <td class="voto_manual_plancha">PLANCHA X</td>
            <td>
                <input type="text" onchange="actualizar_plancha_en_matriz()" class="required number" value="0" maxlength="5" size="5" id="voto1" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO X1</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto11" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO X2</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto12" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO X3</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto13" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_plancha">PLANCHA Y</td>
            <td>
                <input type="text" onchange="actualizar_plancha_en_matriz()" class="required number" value="0" maxlength="5" size="5" id="voto2" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Y1</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto21" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Y2</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto22" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Y3</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto23" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_plancha">PLANCHA Z</td>
            <td>
                <input type="text" onchange="actualizar_plancha_en_matriz()" class="required number" value="0" maxlength="5" size="5" id="voto3" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Z1</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto31" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Z2</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto32" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Z3</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto33" style="width:50px;">
            </td>
        </tr>
    </tbody>
</table>
<input id="cargar" onClick="return validar();" type="submit" value="Cargar" />

Necesito verificar (mediante onClick="return validar();" del input "Cargar") que la sumatoria de los votos de candidatos sea igual a los votos de la plancha y que la sumatoria de las planchas sea igual a un número que tengo en un input previo con id="total"

Mi idea era generar una matriz donde la primera fila (matriz[#plancha][0]) se almacenaran los votos de las planchas y en cada columna (matriz[#plancha][1..n]) almacenar los votos de cada candidato por plancha. ¿Alguien me podria ayudar? Muchas gracias....
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 Vainas
Val: 95
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear y llenar array multidimensional Javascript a partir de html generado con ciclos PHP

Publicado por Vainas (258 intervenciones) el 03/07/2015 12:01:20
Buenas:

He hecho el codigo a medias y un poco rapido asi que puede que tenga cosas mal echas... pero creo que te puede servir para empezar.

No explicas muy bien si quieres mostrar algun error cuando la sumatoria de los votos no coincide con lo que se ha puesto en las planchas o quieres que a medida que se van metiendo votos vaya sumando en las planchas (yo lo he hecho de la primera forma que he comentado aqui).

He eliminado los onchange del html y los he agregado directamente en el codigo javascript. Faltaria de implementar el cargar y arreglar que la matriz no empezara en 1 sino en 0 por ejemplo... en fin, espero que al menos te pueda orientar:

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td class="voto_manual_plancha">PLANCHA X</td>
            <td>
                <input type="text" class="required number plancha" value="0" maxlength="5" size="5" id="voto1" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO X1</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto11" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO X2</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto12" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO X3</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto13" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_plancha">PLANCHA Y</td>
            <td>
                <input type="text" class="required number plancha" value="0" maxlength="5" size="5" id="voto2" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Y1</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto21" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Y2</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto22" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Y3</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto23" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_plancha">PLANCHA Z</td>
            <td>
                <input type="text" class="required number plancha" value="0" maxlength="5" size="5" id="voto3" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Z1</td>
            <td>
                <input type="text" onchange="actualizar_cand_en_matriz();" class="required number" value="0" maxlength="5" size="5" id="voto31" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Z2</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto32" style="width:50px;">
            </td>
        </tr>
        <tr>
            <td class="voto_manual_candidato">-  CANDIDATO Z3</td>
            <td>
                <input type="text" class="required number cantidad" value="0" maxlength="5" size="5" id="voto33" style="width:50px;">
            </td>
        </tr>
    </tbody>
</table>
<input id="cargar" onClick="return validar();" type="submit" value="Cargar" />
<script>
var matriz1 = [];
var planchas = document.querySelectorAll(".plancha");
var matriz = document.querySelectorAll(".cantidad");
//console.log(planchas);

for(var i= 0; i<planchas.length; i++) {
	planchas[i].addEventListener("change", function() {
		var indice = parseInt(this.id.substring(4));
		var aux = matriz1[indice];
		var sum = 0;
		for (var index in aux){
			sum += aux[index];
		}
		if (sum == this.value){
			alert("valor correcto");
		}else{
			alert("valor incorrecto");
		}
});
}
for(var i= 0; i<matriz.length; i++) {
	matriz[i].addEventListener("change", function() {
		var indice = parseInt(this.id.substring(4,5));
		var j = parseInt(this.id.substring(5));
		matriz1[indice] = matriz1[indice] || [];
		matriz1[indice][j] = parseInt(this.value);
});
}
 
/*for(var indexe in matriz1){

	for (var colum in matriz1[indexe]){

		console.log(matriz1[indexe][colum]);

	}

}*/
</script>
</body>
</html>

Saludos
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

Crear y llenar array multidimensional Javascript a partir de html generado con ciclos PHP

Publicado por Freddy (2 intervenciones) el 03/07/2015 19:34:08
Ya lo voy a probar y apenas termine les comento como me fue... Gracias Vainas!!!
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