0

$(document).ready(function(){  
  var i=1;  
  $('#add').click(function(){  
       i++;  
       $('#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>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });  

});  
<html>  
  <head>  
       <title>Tabla de prueba</title>  
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  </head>  
  <body>  
       <div class="container">  
            <br />  
            <br />  
            <h2 align="center">Tabla dinamica</h2>  
            <div class="form-group">                     
                 <form name="add_name" id="add_name">  
                      <div class="table-responsive">  
                           <table class="table table-bordered" id="dynamic_field">  
                                <tr>
                                   <td bgcolor="#FD0202"></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 pregunta" class="form-control name_list" /></td>                                             
                                </tr>  
                           </table>                               
                      </div>  
                 </form>  
            </div>  
       </div> 
    <td><button type="button" name="add" id="add" class="btn btn-success">Agregar Campo</button></td>
  </body>  
</html>  

 

   

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í

1 respuesta 1

1

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í

$(document).ready(function(){  
      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>';
      
      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>';

      addEvents($('tr'));

			// Esto asocia el evento del botón 'Agregar Campo'
			$('#main-add').click(function(){
           var row = $(main_field);
           $('#dynamic_field').append(row)
           addEvents(row);
      });
     
    // Esto asocia los eventos de los botones de cada hilera.
    function addEvents(row) {
      row.find('.btn-add').click(function(){
           var row = $(child_field);
           $(this).parent().parent().after(row)
           addEvents(row);
      });  
      row.find('.btn_remove').click(function(){  
           $(this).parent().parent().remove();  
      });
    }
 });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  
       <div class="container">  
            <br />  
            <br />  
            <h2 align="center">Tabla dinamica</h2>  
            <div class="form-group">                     
                 <form name="add_name" id="add_name">  
                      <div class="table-responsive">  
                           <table class="table table-bordered" id="dynamic_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" data-id='0' 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>  
                           </table>                               
                      </div>  
                 </form>  
            </div>  
       </div> 
            <td><button type="button" name="add" id="main-add" class="btn-add btn btn-success">Agregar Campo</button></td>
  </body>

0

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.