Skip to main content
se añadieron 789 caracteres en el cuerpo
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28
  • 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>.
  • 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>.
se añadieron 789 caracteres en el cuerpo
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

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:

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:

Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

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>