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> add </button> </td>
</tr>
</tbody>
</table>