0

Tengo el siguiente codigo donde agrego una una fila a una tabla. Tengo un indicador que es un numero.

Quiero poder al momento de agregar una nueva fila este indicador incremente en uno.

Ejemplo si el indicador es 10, y agrego una fila este debe llevar el num 11 y en caso que agregue otro este también debería sumar uno 12.

Mi idea es crear una funcion donde me sume la ultima fila de la tabla y me agrege +1 al valor de ese indicador.

var i = 1;
$('.add').click(function() {
    i++;
    
    $('#tbl_cotizacion').find('tbody').append('<tr id="row' + i + '"><td></td> <td></td>  <td></td> <td width="5%"><button type="button" name="remove" id="' + i + '" class="btn btn-primary btn-sm btn_remove">x</button></td></tr>');
});
$(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


     
     <table id="tbl_cotizacion" class="table table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
              <tr class="table-warning">
                  <th width="5%"># Indicador</th>
                  <th width="5%">Cantidad</th>
                  <th width="10%">Componente</th>
                  <th width="5%"></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td>10</td>
                <td>4 </td>
                <td>Falso </td>
                 <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light add'> <i class='fa fa-add' aria-hidden='true'></i> &nbsp; add </button> </td>
              </tr>

            </tbody>
          </table>

3
  • el indicador debe empezar en 10? o sólo es un ejemplo y comienza en 1? Commented el 19 jun. 2019 a las 19:44
  • en teoria ya lo estas haciendo al presionar el boton incrementar i++ , que es lo que no has podido lograr? Commented el 19 jun. 2019 a las 19:53
  • @PauloUrbanoRivera este empieza en 10, en otros caso empieza en distinto numero
    – MoteCL
    Commented el 19 jun. 2019 a las 20:19

1 respuesta 1

0

Lo único que te falta es agregar ese flag o contador que estas utilizando en el cuerpo de la tabla que creas a través de JQuery

var i = 1;
$('.add').click(function() {
    i++;
    
    $('#tbl_cotizacion').find('tbody').append(`<tr id="row${i}"><td>${i}</td> <td></td>  <td></td> <td width="5%"><button type="button" name="remove" id="${i}" class="btn btn-primary btn-sm btn_remove">x</button></td></tr>`);
});
$(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <table id="tbl_cotizacion" class="table table-bordered table-sm" cellspacing="0" width="100%">
          <thead>
              <tr class="table-warning">
                  <th width="5%"># Indicador</th>
                  <th width="5%">Cantidad</th>
                  <th width="10%">Componente</th>
                  <th width="5%"></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td>1</td>
                <td>4 </td>
                <td>Falso </td>
                 <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light add'> <i class='fa fa-add' aria-hidden='true'></i> &nbsp; add </button> </td>
              </tr>

            </tbody>
          </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Si te fijas el único cambio que hice fue agregar la variable i al cuerpo del <td></td>. Adicionalmente te recomiendo utilizar la interpolación que se incluyo desde la versión de JavaScript, ya que son mucho más limpias de utilizar que concatenar cadenas.

Nos comentas si es lo que necesitas :)

3
  • No quiero un contador quiero un sumar +1 al ultimo indicador de la tabla. Ejemplo si borro uno me deberia recarcular los indicadores.
    – MoteCL
    Commented el 19 jun. 2019 a las 20:21
  • En ese caso si por ejemplo creo 4 filas que van desde la 10 a la 14, y elimino la 12, tu quieres que los indicadores YA creados cambien también? Commented el 19 jun. 2019 a las 20:48
  • Si, presionar el btn borrar elimina la fila 12, este re calcula el numero 13 => 12 y el 14 => 13
    – MoteCL
    Commented el 19 jun. 2019 a las 20:58

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.