1

Hola tengo el siguiente código al momento de apretar el botón "Agregar +" se ingresa una fila nueva a la tabla para seguir ingresando datos. Mi pregunta es la siguiente hay alguna forma donde al apretar el botón "Agregar +" el campo que yo agregue baje con el botón al lado "Quitar" y un nuevo campo vació al lado del botón "Agregar +".

<!DOCTYPE html>

<html lang="es-es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="card-body">
        <div class="table-responsive">

            <table class="table table-bordered" id="dynamic_field">
                <tr>
                    <td>
                        <input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" />
                    </td>
                    <td>
                        <button type="button" name="add" id="add" class="btn btn-primary">Agregar + </button>
                    </td>

                </tr>
            </table>
            <input type="submit" name="submit" class="btn btn-outline-success btn-lg btn-block" value="Ingresar Postulaciones" />
        </div>
    </div>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var i = 1;
            $('#add').click(function() {
                i++;
                $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>');
            });
            $(document).on('click', '.btn_remove', function() {
                var button_id = $(this).attr("id");
                $('#row' + button_id + '').remove();
            });
        });
    </script>
</body>

</html>
Espero poder explicarme bien. cualquier duda estaré mirando el post. Saludos

4
  • 2
    No entiendo muy bien lo que deseas
    – Alvarez
    Commented el 6 sept. 2017 a las 15:53
  • Dígito una postulacion pero deseo agregar otra mas, al apretar el boton "agregar +" la postulacion que digite baje y se inserte una campo vacio en la primera fila.
    – MoteCL
    Commented el 6 sept. 2017 a las 15:56
  • Lo que deseas es ir desplazando los input creados hacia arriba por asi decirlo, y los que estan creados vayan bajando o llendose al fondo?
    – Alvarez
    Commented el 6 sept. 2017 a las 15:59
  • los input creados hacia bajo como esta en el código pero que estos bajen con los datos que yo ingreso, para después ingresar todos de una.
    – MoteCL
    Commented el 6 sept. 2017 a las 16:01

1 respuesta 1

1

Solo tienes que cambiar el append por after, asi: Solo tiene un pequeño detalle con el input que tenias al principio, porque el td y el tr no tienen id, por eso no se desplaza. Lo ideal es crear todos desde cero y alli funciona como quieres.

 $(document).ready(function() {
            var i = 1;
            $('#add').click(function() {
                i++;
                $('#dynamic_field tr:first').after('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>');
            });
            $(document).on('click', '.btn_remove', function() {
                var button_id = $(this).attr("id");
                $('#row' + button_id + '').remove();
            });
        });
<!DOCTYPE html>

<html lang="es-es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="card-body">
        <div class="table-responsive">

            <table class="table table-bordered" id="dynamic_field">
                <tr id="row">
                    <td>
                        <input  type="hidden" name="name[]" placeholder="Postulación" class="form-control name_list" />
                    </td>
                    <td>
                        <button type="button" name="add" id="add" class="btn btn-primary">Agregar + </button>
                    </td>

                </tr>
            </table>
            <input type="submit" name="submit" class="btn btn-outline-success btn-lg btn-block" value="Ingresar Postulaciones" />
        </div>
    </div>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>

</html>

2
  • Algo así deseo muchas gracias mirare el código y veré que podre hacer. Muchas gracias por tu tiempo :)
    – MoteCL
    Commented el 6 sept. 2017 a las 18:21
  • Cualquier duda por aquí estaremos
    – Alvarez
    Commented el 6 sept. 2017 a las 19:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.