0

Manejo números de serie por lo cual tengo un input con id="cantidad" en el que por ejemplo si escribo 2 se insertan dos filas a mi tabla dinámica para que inserte los números de serie:

$('#cantidad').focusout(function() {

  var x = $(this).val();
  var a = 0;
  var o = 1;
  // console.log(x);
  a++;
  o++;
  for ($i = 1; $i < x; $i++) {
    $('#dynamic_field').append('<tr id="row' + o + '"><td><input type="text" name="numeroSerie[]" id="numeroSerie' + a + '" placeholder="Ingrese número de serie" class="form-control name_list"/></td></tr>');
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-9 col-md-6">
  <div class="form-group" id="addMore">
    <strong>Cantidad:</strong>
    <input class="form-control" type="text" name="cantidad[]" id="cantidad">
  </div>
</div>
<div class="container" id="content">
  <br />
  <div class="form-group">
    <div class="table-responsive">
      <table class="table table-bordered" id="dynamic_field">
        <th>Número de serie</th>
        <tr>
          <td><input type="text" name="numeroSerie[]" id="numeroSerie" placeholder="Ingrese número de serie" class="form-control name_list" /></td>
        </tr>
      </table>
    </div>
  </div>
</div>

Lo que quiero enseguida es que si yo escribo otra cantidad, se actualice mi tabla agregando las filas que le indique, investigando vi que se podria hacer con onchange pero no logro actualizar:

$(document).on('change', '#cantidad', function(){
  var x = document.getElementById("#cantidad").value;
  var button_id = $(this).attr("id");
  document.getElementById("#row'+button_id+'").remove();
  // var button_id = $(this).attr("id"); 
  // $('#row'+button_id+'').remove();
});
3
  • No entiendo si quieres "agregar" o "reemplazar" las filas que pongas del input. Lo más normal seria reemplazarlas completamente supongo, pero tengo esa duda. Es decir, si primero pones 10 y luego 5, ¿cuantas tienen que quedar? ¿5? ¿o 15?
    – masterguru
    Commented el 20 ene. 2022 a las 17:39
  • Exacto, reemplazar, actualizare mi pregunta, si primero pongo 10 y luego 5, me deberian quedar 5 y si vuelvo a poner 10 pues serian 10 filas Commented el 20 ene. 2022 a las 17:50
  • Bueno, creo que ya esta, ya he terminado la edición de mi respuesta. Mira a ver si la comprendes entera y si así ya te va bien, aunque no me convence que pongas una fila por defecto por el tema del id que tiene, pero bueno, en el fondo lo importante seran los name a menos que realmente necesites acceder por id a los campos en algun momento.
    – masterguru
    Commented el 20 ene. 2022 a las 18:15

1 respuesta 1

1

Tienes varias cosas raras en tu código, pero primero lo que has pedido.

Para conseguir lo que preguntas simplemente agrega esta línea en la función actual del focusout antes de entrar en el bucle for:

$('#dynamic_field').empty();

De tal forma que quedaria así:

$('#cantidad').focusout(function() {

  var x = $(this).val();
  var a = 0;
  var o = 1;
  // console.log(x);
  a++;
  o++;
  $('#dynamic_field').empty();
  for ($i = 1; $i < x; $i++) {
    $('#dynamic_field').append('<tr id="row' + o + '"><td><input type="text" name="numeroSerie[]" id="numeroSerie' + a + '" placeholder="Ingrese número de serie" class="form-control name_list"/></td></tr>');
  }
});

No te hace falta controlar el onchange de este modo.

Pero eso te va a causar un problema inesperado, y es que al empezar el bucle con i=1 te va a faltar un elemento cada vez que lo ejecutes.

Por lo tanto, vamos a cambiar varias cosas, como decia al principio, y vamos a acabar dejando el código así:

$('#cantidad').focusout(function() {
  var x = $(this).val();
  var a = 0;
  var o = 1;
  // console.log(x);
  $('#dynamic_field').empty();
  for (i = 0; i < x; i++) {
    a++;
    o++;
    $('#dynamic_field').append('<tr id="row' + o + '"><td><input type="text" name="numeroSerie[]" id="numeroSerie' + a + '" placeholder="Ingrese número de serie" class="form-control name_list"/></td></tr>');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-9 col-md-6">
  <div class="form-group" id="addMore">
    <strong>Cantidad:</strong>
    <input class="form-control" type="text" name="cantidad[]" id="cantidad">
  </div>
</div>
<div class="container" id="content">
  <br />
  <div class="form-group">
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
          <th>Número de serie</th>
        </thead>
        <tbody id="dynamic_field">
          <tr>
            <td><input type="text" name="numeroSerie[]" id="numeroSerie" placeholder="Ingrese número de serie" class="form-control name_list" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Explicación de los cambios:

  • Se han movido estas líneas:
a++
o++

dentro de bucle for porque no tenian sentido fuera de el, y porque así los id de las filas y de los inputs seran distintos (antes eran todos iguales)

  • Como decia, se ha agregado esta linea:
$('#dynamic_field').empty();

para que cada vez que el foco salga del input se recalcule todo de nuevo dejando vacio el elemento con el identificador #dynamic_field

  • Se han cambiado las variables del for. Antes eran $i (típicas de PHP) y ahora son solo i que son las correctas en javascript, aunque despues no se usen durante las iteraciones. Por lo tanto ahora queda asi:
for (i = 0; i < x; i++) {

Luego he realizado cambios en el HTML. A saber:

  • He quitado el atributo id de la tabla para ponerlo despues en el tbody, que es el que vamos a reiniciar cada vez y así no eliminamos el título de la cabecera. Por lo tanto ahora está así:
<table class="table table-bordered">
  • Luego he encerrado la cabecera con los tags siguiendo las pautas de un HTML normal:
<thead>
  <th>Número de serie</th>
</thead>
  • Luego he agregado el elemento para el cuerpo de las filas, agregando el id que antes habia eliminado en la tabla, quedando así:
<tbody id="dynamic_field">

Con eso conseguimos que el javascript solo actue en este elemento y no en toda la tabla gracias al id dynamic_field.

  • Y finalmente he cerrado el al finalizar la primera fila puesta por defecto, es decir, despues de tu </tr>.
1
  • Cierto, tenia mal el inicio en mi for con $i ininicalizado en 1 y me faltaba agregar "a++" dentro del for para que tuvieran diferentes "id", esa era la razón de que no me dejara realizar un insert, mil gracias :) Commented el 20 ene. 2022 a las 18:02

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.