[SOLUCIONADO] limitar registros en una grilla dinamica

omelgarejo · #1 (**permalink**) 18/04/2014, 12:12

Hola, como puedo limitar la cantidad de registros que se ingresa en esta grilla? por ejemplo que el usuario solo cargue hasta 10 registros.

Código HTML:

<html>
    <head>

        <script type="text/javascript">
            <!--

            function crearFila()
            {
                var tabla = document.getElementById("tabla");
                var fila = tabla.insertRow(1);

                var celda1 = fila.insertCell(0);
                var element1 = document.createElement("input");
                element1.type = "text";
                celda1.appendChild(element1);

 
            }

//-->
        </script>

    </head>
    <body>

        <table id="tabla" border="1">
            <tr>
                <td>Primera celda</td>
            </tr>

        </table>

        <br>
        <input type="button" onclick="fila()" value="Crear fila">
    </body>
</html>

Alexis88 · #2 (**permalink**) 18/04/2014, 14:29

Obteniendo el total de filas de la tabla con el método length.

Código Javascript:

Ver originalif (tabla.getElementsByTagName("tr").length < 11){ 
    //Si hay menos de 11 filas (10 + la primera que es la cabecera)
    //Añades más filas
}

DEMO

Saludos

omelgarejo · #3 (**permalink**) 18/04/2014, 17:40

Gracias Alexis88, me funciona perfectamente.

omelgarejo · #4 (**permalink**) 18/04/2014, 17:46

Les dejo el script solucionado:

Código HTML:

<html>
    <head>

        <script type="text/javascript">
            <!--
    
            function fila() {
                if (tabla.getElementsByTagName("tr").length<11) {
                    crearFila();
                } else{
                    alert("Solo puede agregar 10 registros");
                }
            }

            function crearFila()
            {
                var tabla = document.getElementById("tabla");
                var fila = tabla.insertRow(1);

                var celda1 = fila.insertCell(0);
                var element1 = document.createElement("input");
                element1.type = "text";
                celda1.appendChild(element1);

                // celda1.appendChild(t1);El método appendChild permite insertar un elemento al final de otro
                //celda2.appendChild(t2);

            }

//-->
        </script>

    </head>
    <body>

        <table id="tabla" border="1">
            <tr>
                <td>Primera celda</td>
            </tr>

        </table>

        <br>
        <input type="button" onclick="fila()" value="Crear fila">
    </body>
</html>