0

Bueno tengo la siguiente tabla donde agrego y elimino lineas de ella. La quiero hacer mas dinámica al poder eliminar o agregar una linea este se ordene con los numeros de el 1 al infinito de forma correlativa.

Para esto quiero saber si existe alguna funciona donde pueda auto llenar con numeros desde el 1 a infino.

$('#tbl_cotizacion').on('click', '.delete_line', function(e) {
    $(this).closest('tr').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> </td>
                <td> 4 </td>
                <td> Falso </td>
                 <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>

          </tbody>
      </table>

Espero haberme explicado bien.

3
  • ¿Estás utilizando el plugin datatables? Veo que lo estás referenciando pero que no estás generando la tabla con él.
    – Kiko_L
    el 11 feb. 2019 a las 19:36
  • No estoy utlizando datatable
    – MoteCL
    el 11 feb. 2019 a las 19:36
  • Ok. Fíjate que lo tienes referenciado en tu ejemplo
    – Kiko_L
    el 11 feb. 2019 a las 19:38

3 respuestas 3

2

Te puede servir recorrer nuevamente la tabla. Espero haber entendido tu pregunta.

$('#tbl_cotizacion').on('click', '.delete_line', function(e) {
    $(this).closest('tr').remove();
    var i = 1;
    $('#tbl_cotizacion > tbody  > tr').each(function(e) {
      $(this)[0].cells[0].outerHTML='<td>'+ i +'</td>';
        i++;
    });
    });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.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>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.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> 1 </td>
                <td> 4 </td>
                <td> Falso </td>
                 <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>
              <tr>
                <td> 2 </td>
                <td> 5 </td>
                <td> Falso </td>
                <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>
              
               <tr>
                <td> 3 </td>
                <td> 10 </td>
                <td> Falso </td>
                <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>

          </tbody>
      </table>

1
  • thanks my budda
    – MoteCL
    el 11 feb. 2019 a las 19:57
1

Si te he entendido bien lo que quieres el reordenar la tabla según la segunda columna. Podrías utilizar la función sort para comparar los textos de la columna:

$('#tbl_cotizacion').on('click', '.delete_line', function(e) {
  $(this).closest('tr').remove();
  reorderTable($("#tbl_cotizacion"));
});

function reorderTable(table){
  let tbody = table.find('tbody');
  tbody.find('tr').sort(function(a, b) {
    return $('td:nth-child(2)', a).text().localeCompare($('td:nth-child(2)', b).text()); 
  }).appendTo(tbody);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">


     
     <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> </td>
                <td> 4 </td>
                <td> Falso </td>
                 <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>
<tr>
                <td> </td>
                <td> 1 </td>
                <td> Falso </td>
                <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>
              <tr>
                <td> </td>
                <td> 3 </td>
                <td> Falso </td>
                <td>  <button type='button'  class='btn btn-sm btn-slack waves-effect waves-light delete_line'> <i class='fa fa-trash' aria-hidden='true'></i> &nbsp; Borrar </button> </td>
              </tr>
          </tbody>
      </table>

1
  • creo que lo que quiere es que se regeneren los numeros, si se elimino la fila 2 de 3 filas 1,2,3 => 1,X,3 entonces que ahora se vea 1,2.
    – zerocool
    el 11 feb. 2019 a las 19:50
1

Saludos podrias hacerlo de la siguiente forma sin necesidad de un ID:

<table id = 'dsTable' border=1>
      <tr>
         <td> Marcas</td>
      </tr>
      <tr>
         <td> Chevrolet </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)"  </td>
      </tr>
       <tr>
         <td> KIA </td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(this)" </td>
      </tr>
   </table>
<script>
function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}
</script>

Uso el evento onclick el cual llama a una funcion deleteRow, esta se encarga de eliminar la fila.

Espero te sirva !!

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.