0

Estoy trabajando en un formulario, en el cual, mediante botones, se adiciona o elimina filas a una tabla usando javascript y la librería jquery.

Quiero conocer o contar ese número de filas que se van creando según el botón seleccionado, y luego, enviar ese dato o valor, mediante método post, al siguiente archivo, pero me ha resultado algo enredado de resolver.

Este es el código funcionando:

          <script type="text/javascript">
          $(document).ready(function(){
            $(".idi").change(function(){
              var tr =  $(this).parent().parent();
             //alert($('.idi').val());
              idi = $(this).val();
              $.post("getIdiomas.php", { idi: idi }, 
              function(data){
                tr.find("#term").html(data); 
              });
            })

            $("#adicional").on('click', function(){
              var row = $("#tabla tbody tr:eq(0)").clone(true).removeClass('fila-fija');
              row.find('.term').empty(); 
              row.appendTo("#tabla tbody")
            });

            $(".eliminar").on("click",function(){
              var parent = $(this).closest("tr").remove();
            });
          }); 
        </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table align="center" id="tabla">
               <thead>
                  <tr>
                     <th>IDIOMAS</th>
                     <th>Opciones</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>
                        <select class="idi" name="idi[]">
                           <option value="NULL">Seleccionar</option>
                           <option value="1">ingles</option>
                           <option value="2">frances</option>
                        </select>
                     </td>
                     <td><select name="term[]" class="term" id="term"></select></td>
                     <td class="eliminar"><input type="button" value="-"/></td>
                   </tr>
               </tbody>
            </table>
            
    <table align='center'><tr><td align=center><div><button id='adicional' name='adicional' type='button'>Fila +</button></div></td></tr></table>

Me podrían brindar su ayuda?

Muchas Gracias.

1 respuesta 1

0

Prueba con este codigo:

$(document).ready(function(){
            $(".idi").change(function(){
              var tr =  $(this).parent().parent();
             //alert($('.idi').val());
              idi = $(this).val();
              $.post("getIdiomas.php", { idi: idi }, 
              function(data){
                tr.find("#term").html(data); 
              });
            })

            $("#adicional").on('click', function(){
              var row = $("#tabla tbody tr:eq(0)").clone(true).removeClass('fila-fija');
              row.find('.term').empty(); 
              row.appendTo("#tabla tbody")
              //
              var count = $("#tabla tbody tr").length;
              $("#count").val(count);
            });

            $(".eliminar").on("click",function(){
              var parent = $(this).closest("tr").remove();
            });
          }); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table align="center" id="tabla">
               <thead>
                  <tr>
                     <th>IDIOMAS</th>
                     <th>Opciones</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td>
                        <select class="idi" name="idi[]">
                           <option value="NULL">Seleccionar</option>
                           <option value="1">ingles</option>
                           <option value="2">frances</option>
                        </select>
                     </td>
                     <td><select name="term[]" class="term" id="term"></select></td>
                     <td class="eliminar"><input type="button" value="-"/></td>
                   </tr>
               </tbody>
            </table>
            
    <table align='center'><tr><td align=center><div><button id='adicional' name='adicional' type='button'>Fila +</button></div></td></tr></table>
    
    <table align='center'><tr><td align=center><div>Filas: <input id='count' type='number'/></div></td></tr></table>

3
  • gracias por tu aporte, funciona, pero al eliminar filas, no se actualiza. Que hace falta? el 7 may. 2019 a las 20:29
  • Solamente vuelve a realizar la funcion donde eliminas row, queda asi: $(".eliminar").on("click",function(){ var parent = $(this).closest("tr").remove(); count = $("#tabla tbody tr").length; $("#count").val(count); }) el 7 may. 2019 a las 22:37
  • Gracias @Carlos Herrera, funcionó correctamente, ahora me generó otra duda, cómo hacer para enviar en un formulario, el número de listas que se generaron tanto del select id, como del select term. el 13 may. 2019 a las 20:53

Tu Respuesta

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

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