2

Tengo el siguiente codigo donde puedo mover las filas de una tabla, al agregar las filas en bruto funciona de maravilla pero si agrego una fila con el boton esta fila agregada no se puede ordernar

Alguna solución a este codigo? El metodo insertRow() esta siendo mal usado

$(document).ready(function() {
$("#btn_save_line").click(function() {
   
      var newRow = document.getElementById('tbl_cotizacion').insertRow();
      newRow.innerHTML = "<tr><td align='center'>1 </td><td>2</td><td>3</td><td> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span></td></tr>";
 

});
    $(".arriba,.abajo").click(function(){
      
    var row = $(this).parents("tr:first");
    if ($(this).is(".arriba")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});
});
<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>


       <button type="button" class="btn btn-primary" id="btn_save_line" >Agregar</button>
     <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 class='btn btn-danger btn-sm'>x </button> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span>  </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td> <button class='btn btn-danger btn-sm'>x </button> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span> </td>
              </tr>

          </tbody>
      </table>

1 respuesta 1

1

Para que los elementos dinamicos funciones, necesitas usar .on() asi:

$(document).ready(function() {
$("#btn_save_line").click(function() {
   
      var newRow = document.getElementById('tbl_cotizacion').insertRow();
      newRow.innerHTML = "<tr><td align='center'>1 </td><td>2</td><td>3</td><td> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span></td></tr>";
 

});
    $(document).on("click", ".arriba,.abajo", function(){
      
    var row = $(this).parents("tr:first");
    if ($(this).is(".arriba")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});
});
<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>


       <button type="button" class="btn btn-primary" id="btn_save_line" >Agregar</button>
     <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> <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span>  </td>
              </tr>
              <tr>
                <td> </td>
                <td> 5 </td>
                <td> Falso </td>
                <td>  <span class='glyphicon glyphicon-chevron-up arriba'></span>  <span class='glyphicon glyphicon-chevron-down down abajo'> </span> </td>
              </tr>

          </tbody>
      </table>

1
  • thanks my budda!
    – MoteCL
    Commented el 20 feb. 2019 a las 16:14

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.