0

Estoy desarrollando una orden de compra, pero tengo problemas con respecto al reordenamiento de los números cuando elimino una fila de la tabla, los id son generados mediante un contador para todas las filas e item de cada fila.

var contador = 1;

function addrows() {
  contador++;
  var row = '<tr id="row' + contador + '">' +
    '<td><input type="text" readonly="" class="form-control" id="nroDetalle" name="rnoDetalle[]" value="' + contador + '"></td>' +
    '<td><input type="text"  class="form-control" id="cant' + contador + '" name="cant[]"></td>' +
    '<td>' +
    '<select name="medida[]" id="idMedida" class="form-control">' +
    '<option value="">Cajas</option>' +
    '<option value="">Piezas</option>' +
    '<option value="">Galones</option>' +
    '<option value="">Metros</option>' +
    '</select>' +
    '</td>' +
    '<td id="sel' + contador + '" name="idDescripcion[]">' +
    '</td>' +
    '<td><input class="form-control" name="val[]" id="val' + contador + '"></td>' +
    '<td><input class="form-control" readonly="true" name="igv[]" id="ig' + contador + '"></td>' +
    '<td><input class="form-control" readonly="true" name="subt[]" id="subt' + contador + '" ></td>' +
    '<td><input class="form-control" readonly="true" name="totl[]" id="totl' + contador + '" ></td>' +
    '<td><button name="remove" id="' + contador + '" type="button" class="btn btn-danger fa fa-trash btn_remove" onclick="eliminar();"></button></td>' +
    '</tr>';
  $("#rows").append(row);
}

function clon() {
  addrows();
  var estructuraSelect = "<select name=[] id=\"descripciones" + contador + "\" class=\"form-control descripciones\">";
  var selectActual = $("#descripciones1").html();
  estructuraSelect += selectActual + "</select>"
  $("#sel" + contador).html(estructuraSelect);
};

function eliminar(id_fila) {
  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });
  reordenar();
}

function reordenar() {
  var contador = contador;
  $('#tabla tbody tr').each(function() {
    $(this).find('input').eq(0).text(contador);
    contador;
  });
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Proyecto</title>
</head>

<body>
  <div style="margin:0 auto;">
    <button class="btn btn-success" onclick="clon();">Agregar</button>
    <hr>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>ITEM</th>
          <th>CANTIDAD</th>
          <th>UNIT MEDIDA</th>
          <th>DESCRIPCION</th>
          <th>VAL COMPRA</th>
          <th>IGV</th>
          <th>SUB TOTAL</th>
          <th>TOTAL</th>
          <th>ACCION</th>
        </tr>
      </thead>
      <tbody id="rows">
        <tr id="rols">
          <td><input type="text" readonly="" class="form-control" id="nroDetalle" name="rnoDetalle[]" value="1"></td>
          <td><input type="text" class="form-control" id="cant1" name="cant[]"></td>
          <td>
            <select name="medida[]" id="idMedida" class="form-control">
              <option value="">Cajas</option>
              <option value="">Piezas</option>
              <option value="">Galones</option>
              <option value="">Metros</option>
            </select>
          </td>
          <td id="tbodyDescripcion">
            <select name="idDescripcion[]" id="descripciones1" class="form-control descripciones">
              <option value="">Caja de tornillos </option>
              <option value="">Multiplacas</option>
              <option value="">Llaves francesas</option>
            </select>
          </td>
          </td>
          <td><input class="form-control" name="val[]" id="val1"></td>
          <td><input class="form-control" readonly="true" name="igv[]" id="ig1"></td>
          <td><input class="form-control" readonly="true" name="subt[]" id="subt1"></td>
          <td><input class="form-control" readonly="true" name="totl[]" id="totl1"></td>
          <td class="btnremove">
            <a type="button" class="btn btn-danger fa fa-trash"></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</html>

2
  • En reordenar no deberias incrementar contador en cada iteración del each e inicializarlo a 0 antes de comenzar? el 15 mar. 2018 a las 15:29
  • El problema que veo a futuro con tus ids generadas es que cuando quieras reordenar también las deberás cambiar porque si las usas para obtener valores de campos te saltaran error de que no existen o no son las correctas de tu row. el 15 mar. 2018 a las 16:29

1 respuesta 1

0

Tal como te lo comente el problema de tu código es manejar ids para elementos y que al momento de ordenarlos también deberás actualizarlos para que no te de error por ello cambie tu código para que solo maneje el id el <tr><tr/> padre ademas de cambiar la función eliminar ya que esta al ejecutarla asignas la función eliminar a la class btn_remove varias veces. Espero te sirva mi respuesta.

var contador = 1; 

function addrows() {
  contador++;
  var row = '<tr id="' + contador + '">' + //aqui pongo el id al tr padre
    '<td><input type="text" readonly="" class="form-control" id="nroDetalle" name="rnoDetalle[]" value="' + contador + '"></td>' +
    '<td><input type="text"  class="form-control" id="cantidad" name="cant[]"></td>' +
    '<td>' +
    '<select name="medida[]" id="idMedida" class="form-control">' +
    '<option value="">Cajas</option>' +
    '<option value="">Piezas</option>' +
    '<option value="">Galones</option>' +
    '<option value="">Metros</option>' +
    '</select>' +
    '</td>' +
    '<td id="selectDesc" name="idDescripcion[]" class="td-descripcion">' +
    '</td>' +
    '<td><input class="form-control" name="val[]" id="val"></td>' +
    '<td><input class="form-control" readonly="true" name="igv[]" id="igv"></td>' +
    '<td><input class="form-control" readonly="true" name="subt[]" id="subt" ></td>' +
    '<td><input class="form-control" readonly="true" name="totl[]" id="totl" ></td>' +
    '<td><button name="remove"  type="button" class="btn btn-danger fa fa-trash btn_remove" ></button></td>' +
    '</tr>';
  $("#rows").append(row);
}

function clon() {
  addrows();
  var estructuraSelect = "<select name=[] id=\"descripciones\" class=\"form-control descripciones\">";
  var selectActual = $("#descripciones1").html();
  estructuraSelect += selectActual + "</select>"
  $("#" + contador +" .td-descripcion").html(estructuraSelect); //acedes atraves del padre 
};

// esta funcion se ejecutara para todod los button con class btn_remove dinamicamente
$('body').on("click", "button.btn_remove", function() {
  var trparent = $(this).parent().parent(); //aqui obtienes al tr padre ya que la estrutura es tr> td >a
  var button_id = trparent.attr("id"); //obtenemos el id del row
  $('#' + button_id + '').remove(); //removemos el row
  reordenar();
});


function reordenar() {
  contador = 0; //iteramos comenzado con el 0
  $('#tabla tbody tr').each(function() {
    contador++;
    $(this).find('#nroDetalle').val(contador); //cambiamos  el value del primer input
    $(this).attr("id", contador); // cambiamos el id del tr

  });
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Proyecto</title>
</head>

<body>
  <div style="margin:0 auto;">
    <button class="btn btn-success" onclick="clon();">Agregar</button>
    <hr>
    <table class="table table-bordered" id="tabla">
      <thead>
        <tr>
          <th>ITEM</th>
          <th>CANTIDAD</th>
          <th>UNIT MEDIDA</th>
          <th>DESCRIPCION</th>
          <th>VAL COMPRA</th>
          <th>IGV</th>
          <th>SUB TOTAL</th>
          <th>TOTAL</th>
          <th>ACCION</th>
        </tr>
      </thead>
      <tbody id="rows">
        <tr id="rols">
          <td><input type="text" readonly="" class="form-control" id="nroDetalle" name="rnoDetalle[]" value="1"></td>
          <td><input type="text" class="form-control" id="cant1" name="cant[]"></td>
          <td>
            <select name="medida[]" id="idMedida" class="form-control">
              <option value="">Cajas</option>
              <option value="">Piezas</option>
              <option value="">Galones</option>
              <option value="">Metros</option>
            </select>
          </td>
          <td id="tbodyDescripcion">
            <select name="idDescripcion[]" id="descripciones1" class="form-control descripciones">
              <option value="">Caja de tornillos </option>
              <option value="">Multiplacas</option>
              <option value="">Llaves francesas</option>
            </select>
          </td>
          <td>
            <td><input class="form-control" name="val[]" id="val1"></td>
            <td><input class="form-control" readonly="true" name="igv[]" id="ig1"></td>
            <td><input class="form-control" readonly="true" name="subt[]" id="subt1"></td>
            <td><input class="form-control" readonly="true" name="totl[]" id="totl1"></td>
            <td class="btnremove">
              <a type="button" class="btn btn-danger fa fa-trash"></a>
            </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</html>

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.