[SOLUCIONADO] Agregar select a Tabla dinamica

Isley · #1 (**permalink**) 09/01/2018, 11:43

Hola buenas a todos.

Tengo el siguiente ejemplo:
index.php

Código:

<html>
    <head>
        <title>prueba</title>
        <meta charset="UTF-8">
        <script src="jquery-2.1.1.min.js"></script>
        <script src="agregar.js"></script>
    </head>
    <body>
        <table id="tabla" border="1">
            <thead>
                <tr>
                    <td>Titulo 1</td>
                    <td>Titulo 2</td>
                    <td>Titulo 3</td>
                </tr>
            </thead>
        </table>
        <input id="bt_add" type="button" value="agregar">
    </body>
</html>

agregar.js

Código:

$(document).ready(function(){
    $('#bt_add').click(function(){
        agregar();
    });
});
 
function agregar(){
    var fila='<tr>\n\\n\
                <td><select></select>\n\
                <td><input type="text"></td>\n\
                <td><input type="text"></td>\n\
              </tr>';
    $('#tabla').append(fila);
}

Lo que hace el ejemplo es que va agregando filas a la tabla con un botón, lo que quiero es que en la columna de Titulo 1 que los selects que se agreguen tengan datos de una consulta a una base de datos, pero no se bien hacerlo, espero me puedan orientar o si es que tengo que hacerlo de otra manera.

Saludos.

Alexis88 · #2 (**permalink**) 09/01/2018, 16:04

Si los datos también serán tomados dinámicamente, necesitarías hacer una petición asíncrona (AJAX) para así obtener los datos e insertarlos en el <select>. Para que sea más fácil de manejar, en el archivo que procese la consulta en el lado del servidor (PHP, ASP, JSP, Node.js), podrías crear los <option> para insertarlos fácilmente en la recepción de la respuesta en el primer archivo.

Código Javascript:

Ver original$.ajax({
    url: "ejemplo.php",
    data: {foo: "bar"}
}).done(function(respuesta){
    $("#tabla").append(
    "<tr>
        <td>
            <select>" + respuesta + " </select>
        </td>
        <td><input type='text' /></td>
        <td><input type='text' /></td>
     </tr>");
}).fail(function(xhr, error){
    console.log(error);
});

Isley · #3 (**permalink**) 10/01/2018, 09:22

Gracias por tu respuesta alexis88, ya probé tu código y me funciono excelentemente, solo para agregar en la linea 12 falto cerrar el append con );

Gracias por la ayuda saludos.