Formulario html, tabla padre, hijo, nieto y así sucesivamente

publicado por: Anonymous

_x000D_

_x000D_

$(document).ready(function(){  _x000D_
  var i=1;  _x000D_
  $('#add').click(function(){  _x000D_
       i++;  _x000D_
       $('#dynamic_field').append('<tr id="row'+i+'"><td bgcolor="#000000"></td><td><button type="button" name="add" id="add" class="btn btn-success">+</button></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td><td><input type="text" name="name[]" placeholder="Ingrese dato" class="form-control name_list" /></td></tr>');  _x000D_
  });  _x000D_
  $(document).on('click', '.btn_remove', function(){  _x000D_
       var button_id = $(this).attr("id");   _x000D_
       $('#row'+button_id+'').remove();  _x000D_
  });  _x000D_
_x000D_
});  

_x000D_

<html>  _x000D_
  <head>  _x000D_
       <title>Tabla de prueba</title>  _x000D_
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  _x000D_
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  _x000D_
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  _x000D_
  </head>  _x000D_
  <body>  _x000D_
       <div class="container">  _x000D_
            <br />  _x000D_
            <br />  _x000D_
            <h2 align="center">Tabla dinamica</h2>  _x000D_
            <div class="form-group">                     _x000D_
                 <form name="add_name" id="add_name">  _x000D_
                      <div class="table-responsive">  _x000D_
                           <table class="table table-bordered" id="dynamic_field">  _x000D_
                                <tr>_x000D_
                                   <td bgcolor="#FD0202"></td> _x000D_
                                   <td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>_x000D_
                                   <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td>_x000D_
                                     <td><input type="text" name="name[]" placeholder="Ingrese pregunta" class="form-control name_list" /></td>                                             _x000D_
                                </tr>  _x000D_
                           </table>                               _x000D_
                      </div>  _x000D_
                 </form>  _x000D_
            </div>  _x000D_
       </div> _x000D_
    <td><button type="button" name="add" id="add" class="btn btn-success">Agregar Campo</button></td>_x000D_
  </body>  _x000D_
</html>  _x000D_
_x000D_
 _x000D_
_x000D_
   

_x000D_

_x000D_

_x000D_

Los inputs con cuadro rojo son los principales o los padres, los de cuadro negro los secundarios o hijos, nietos y así sucesivamente mientras más se agreguen inputs secundarios.
La idea es que el botón indicado en la imagen como “1” borre el campo principal y el secundario pase a ser el principal. El botón indicado como “2” agregue otro campo secundario y el botón indicado como “3” agregue un campo principal. Pero no funcionan, solo funcionan los otros dos botones.

introducir la descripción de la imagen aquí

solución

Tu problema es que has creado dos botones con la misma id (add). Al asociarle un evento a esa id, sólo se asocia al primer botón. Además, los botones ‘eliminar’ de las filas añadidas tienen ids correctamente distintas, aunque numéricas (algo válido en html5 pero no en 4, y poco intuitivo); pero los de añadir repiten la misma id add, con lo cual también son inencontrables.

Te he preparado un jsfiddle en el que he modificado un poco el código para no usar ids, que añade las filas detrás de aquella en la que estaba el botón pulsado, y que asocia un código diferente al botón Asociar Campos que al “añadir” de cada fila. Al igual que en tu código, sólo hay campos principales y campos hijo; te dejo ver cómo modificarlo para añadir nietos, etc. Creo que con este punto de partida no debería costarte mucho.

https://jsfiddle.net/zq6acc0w/1/


Edit: insertado el código aquí

_x000D_

_x000D_

$(document).ready(function(){  _x000D_
      const main_field = '<tr><td bgcolor=#FD0202></td><td><button type="button" name="add" class="btn-add btn btn-success">+</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td><td><input type="text" name="name[]" placeholder="Ingrese pregunta" class="form-control name_list" /></td></tr>';_x000D_
      _x000D_
      const child_field = '<tr><td bgcolor="#000000"></td><td><button type="button" name="add" class="btn-add btn btn-success">+</button></td><td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td><td><input type="text" name="name[]" placeholder="Ingrese dato" class="form-control name_list" /></td></tr>';_x000D_
_x000D_
      addEvents($('tr'));_x000D_
_x000D_
			// Esto asocia el evento del botón 'Agregar Campo'_x000D_
			$('#main-add').click(function(){_x000D_
           var row = $(main_field);_x000D_
           $('#dynamic_field').append(row)_x000D_
           addEvents(row);_x000D_
      });_x000D_
     _x000D_
    // Esto asocia los eventos de los botones de cada hilera._x000D_
    function addEvents(row) {_x000D_
      row.find('.btn-add').click(function(){_x000D_
           var row = $(child_field);_x000D_
           $(this).parent().parent().after(row)_x000D_
           addEvents(row);_x000D_
      });  _x000D_
      row.find('.btn_remove').click(function(){  _x000D_
           $(this).parent().parent().remove();  _x000D_
      });_x000D_
    }_x000D_
 });

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<body>  _x000D_
       <div class="container">  _x000D_
            <br />  _x000D_
            <br />  _x000D_
            <h2 align="center">Tabla dinamica</h2>  _x000D_
            <div class="form-group">                     _x000D_
                 <form name="add_name" id="add_name">  _x000D_
                      <div class="table-responsive">  _x000D_
                           <table class="table table-bordered" id="dynamic_field">  _x000D_
                                <tr>_x000D_
                                     <td bgcolor="#FD0202"></td> _x000D_
                                     <td><button type="button" name="add" class="btn-add btn btn-success">+</button></td>_x000D_
                                     <td><button type="button" name="remove" data-id='0' class="btn btn-danger btn_remove">X</button></td>_x000D_
                                     <td><input type="text" name="name[]" placeholder="Ingrese pregunta" class="form-control name_list" /></td>                                             _x000D_
                                </tr>  _x000D_
                           </table>                               _x000D_
                      </div>  _x000D_
                 </form>  _x000D_
            </div>  _x000D_
       </div> _x000D_
            <td><button type="button" name="add" id="main-add" class="btn-add btn btn-success">Agregar Campo</button></td>_x000D_
  </body>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *