Ver Mensaje Individual
  #2 (permalink)  
Antiguo 12/08/2010, 06:47
sixto_jose
 
Fecha de Ingreso: marzo-2006
Mensajes: 31
Antigüedad: 18 años, 8 meses
Puntos: 0
Respuesta: Insertar filas dinámicamente

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>