Crear y llenar array bidimensional Javascript a partir d html generado con ciclos php

fmbetancourt · #1 (**permalink**) 02/07/2015, 12:45

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:

Código:

<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:

Código HTML:

<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>

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....

Alexis88 · #2 (**permalink**) 02/07/2015, 19:19

Se me ocurren muchas formas.

Podrías añadir una clase en particular para cada plancha y otra para cada voto, pero con un número al final de cada uno, teniendo cada plancha y su grupo de votos el mismo número. El resultado sería algo como "plancha1" y todos los votos asociados a dicha plancha tendrían la clase "voto1" y el número aumentaría con cada plancha.

Teniendo esto, podrías hacer lo siguiente para tomarlos por plancha y grupo de votos, de manera independiente:

Código Javascript:

Ver originalvar planchas = document.querySelectorAll("[class^=plancha]"),
    totalPlanchas = planchas.length, votos, totalVotos, i, j;
 
for (i = 0; i < totalPlanchas; i++){
    /*
        planchas[i] representa a la plancha actual en el bucle
        Podrías tomar su valor mediante planchas[i].value
    */
 
    votos = document.querySelectorAll(".voto" + (i + 1));
    totalVotos = votos.length;
 
    for (j = 0; j < totalVotos; j++){
        /*
            Cada voto estará representado en votos[j]
            El acceso para el valor de cada voto será mediante votos[j].value
        */
    }
}

Teniendo esta estructura, podrás trabajar con las planchas y sus votos como desees.

Un ejemplo con datos ficticios

Saludos