Insertar filas dinámicamente

DjNick · #1 (**permalink**) 11/08/2010, 11:12

Buenos días a todos,

Ante todo gracias por la ayuda que puedan ofrecerme.

Les explico mi "pequeño" problema. Resulta que deseo crear cierta cantidad de filas (<tr>) en base a una cantidad que Yo le indique.

Por ejemplo: Tengo un textbox y un boton; en el textbox digito la cantidad de filas (<tr>) que deseo que aparezcan en mi tabla html, entonces al presionar el botón se me ocurre que el mismo envíe este parámetro (el que digite en el textbox) a alguna función que me genera las filas que le indique.

¿Alguien sabe como hacer esto? ¿Javascript? o ¿Cómo?

Nuevamente les agradezco mucho a todos.

Saludos.

sixto_jose · #2 (**permalink**) 12/08/2010, 06:47

hola DjNick es facil solo debes crear una tabla con ciertas columnas y para que se haga aun mas facil utiliza la libreria Jquery que es muy util. te dejo el enlace del Jquery para que lo copies http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js,

Nota: copia el codigo que te da el enlace que te pase y pegalo en un js y dale como nombre el archivo "Jquery.js" y ubicas el texto de ejemplo en una carpeta junto con el "Jquery.js" para que ejecutes el ejemplo

aqui te dejo un ejemplo de como lo podes hacer. espero sea de ayuda

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagina de Ejemplo</title>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>-->
    <script src="Jquery.js" type="text/javascript"></script>
</head>
<body>
    <table>
        <tr>
            <td align="left">
                Ingrese el numero de filas a crear en la tabla
            </td>
        </tr>
        <tr>
            <td align="left">
                <input id="txtNroFila" type="text" />
            </td>
            <td align="left">
                <input id="Button1" type="button" onclick="LlenarFila();" value="Llenar" />
            </td>
        </tr>
    </table>
    <table cellspacing="0" cellpadding="4" border="0" id="tblTabla" style="color: #333333;
        width: 100%; border-collapse: collapse;">
        <tr style="color: White; background-color: #5D7B9D; font-weight: bold;">
            <th align="left">
                Nro
            </th>
            <th align="left">
                Cantidad
            </th>
            <th align="left" scope="col">
                Valor
            </th>
        </tr>
    </table>
    
    <script language="javascript" type="text/javascript">
        function LlenarFila() {
            //Iniciamos esta linea para que el Jquery no tenga conflicto con otras librerias que tengas
            jQuery.noConflict();
            
            //Capturamos el Numero de filas en la variable
            var NroFila = document.getElementById("txtNroFila").value;
            var Cantidad = NroFila * NroFila + 1;
            var valor = Cantidad * 1300;
            
            //removemos las filas que pueda tener la tabla
            jQuery('#tblTabla tr').next().remove();

            //Recorremos el NroFila y vamos creando las filas
            for (var x = 0; x < NroFila; x++) {
                Cantidad = Cantidad + x;
                valor = valor * Cantidad; 
                jQuery('#tblTabla tr:last').after('<tr>' +
                '<td align="left">' + x + '</td>' + 
                '<td align="left">' + Cantidad + '</td>' +
                '<td align="left">' + valor + '</td></tr>');
            }
            //Colocamos algo de extra para colorear las filas :P
            jQuery('#tblTabla tr:odd').css('background-color', '#E9F0F8');
        }
    </script>
</body>
</html>

DjNick · #3 (**permalink**) 12/08/2010, 15:18

Cita:

Iniciado por sixto_jose

hola DjNick es facil solo debes crear una tabla con ciertas columnas y para que se haga aun mas facil utiliza la libreria Jquery que es muy util. te dejo el enlace del Jquery para que lo copies http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js,

Nota: copia el codigo que te da el enlace que te pase y pegalo en un js y dale como nombre el archivo "Jquery.js" y ubicas el texto de ejemplo en una carpeta junto con el "Jquery.js" para que ejecutes el ejemplo

aqui te dejo un ejemplo de como lo podes hacer. espero sea de ayuda

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagina de Ejemplo</title>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>-->
    <script src="Jquery.js" type="text/javascript"></script>
</head>
<body>
    <table>
        <tr>
            <td align="left">
                Ingrese el numero de filas a crear en la tabla
            </td>
        </tr>
        <tr>
            <td align="left">
                <input id="txtNroFila" type="text" />
            </td>
            <td align="left">
                <input id="Button1" type="button" onclick="LlenarFila();" value="Llenar" />
            </td>
        </tr>
    </table>
    <table cellspacing="0" cellpadding="4" border="0" id="tblTabla" style="color: #333333;
        width: 100%; border-collapse: collapse;">
        <tr style="color: White; background-color: #5D7B9D; font-weight: bold;">
            <th align="left">
                Nro
            </th>
            <th align="left">
                Cantidad
            </th>
            <th align="left" scope="col">
                Valor
            </th>
        </tr>
    </table>
    
    <script language="javascript" type="text/javascript">
        function LlenarFila() {
            //Iniciamos esta linea para que el Jquery no tenga conflicto con otras librerias que tengas
            jQuery.noConflict();
            
            //Capturamos el Numero de filas en la variable
            var NroFila = document.getElementById("txtNroFila").value;
            var Cantidad = NroFila * NroFila + 1;
            var valor = Cantidad * 1300;
            
            //removemos las filas que pueda tener la tabla
            jQuery('#tblTabla tr').next().remove();

            //Recorremos el NroFila y vamos creando las filas
            for (var x = 0; x < NroFila; x++) {
                Cantidad = Cantidad + x;
                valor = valor * Cantidad; 
                jQuery('#tblTabla tr:last').after('<tr>' +
                '<td align="left">' + x + '</td>' + 
                '<td align="left">' + Cantidad + '</td>' +
                '<td align="left">' + valor + '</td></tr>');
            }
            //Colocamos algo de extra para colorear las filas :P
            jQuery('#tblTabla tr:odd').css('background-color', '#E9F0F8');
        }
    </script>
</body>
</html>

Hola sixto_jose,

Ante todo muchas gracias por tomarte el tiempo de explicarme y por el código. Sabes estoy intentando ingresar a la ruta que me indicaste para descargar el Jquery pero me dice "Internet Explorer no puede descargar el archivo porque no se encuentra disponible el sitio" algo asi más o menos.

¿Podrías mostrármelo por aca?

Nuevamente muchas gracias. Es la primera vez que posteo y eres la primera person que me ayuda.

Saludos desde Panamá.

claudiovega · #4 (**permalink**) 12/08/2010, 15:30

Este es el sitio oficial de jquery: http://docs.jquery.com/Downloading_jQuery desde ahi puedes bajarla.

DjNick · #5 (**permalink**) 12/08/2010, 16:16

Cita:

Iniciado por claudiovega

Este es el sitio oficial de jquery: [url]http://docs.jquery.com/Downloading_jQuery[/url] desde ahi puedes bajarla.

Muchas gracias claudiovega. Ya pude bajar el archivo.

Ahora toca realizar la prueba. Les cuento como me fue.