2

Tengo el siguiente código, desde un modal agrego pedidos a una tabla, la idea es detectar la primera linea vacía agregar datos a esta. Al ingresar datos a esta linea se debe encontrar el <input type="hidden"> para asignarle un valor y también habilitar el <checkbox> de la linea si la cantidad es mayor a 50.

$('#tbl_folio').on('click', 'button.replay', function(e) {

    var cliente = $(this).closest('tr').find('td:eq(0)').text();
    var cantidad = $(this).closest('tr').find('td:eq(1)').text();
    var comentario = $(this).closest('tr').find('td:eq(2)').text();
    
     $("#pedido tbody > tr:has(td:eq(0):empty):first").find('td:eq(0)').text(cliente);
     $("#pedido tbody > tr:has(td:eq(0):empty):first").find('td:eq(1)').text(cantidad);
     
     $(this).parent().find('input[name=comentario]').val(comentario);
        if (cantidad > 50) {

            $(this).closest('td').find('input[name=Escoge]').attr('disabled', false);
            $(this).closest('td').find('.custom-control-label').text('URGENTE');
        } else {

            $(this).closest('td').find('input[name=Escoge]').attr('disabled', true);
        }
        
  });
<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" data-toggle="modal" data-target="#modalFolio">
  Listado de pedidos
</button>
  <table id="pedido" class="table table-bordered text-center table-sm">
      <thead>
          <tr class="table-info">
              <th width="5%">CLIENTE</th>
              <th width="5%">Cantidad</th>
              <th width="3%">&nbsp; </th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td></td>
              <td></td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="1" disabled>
                      <input type="hidden" name="comentario">
                      <label class="custom-control-label" for="1"></label>
                  </div>
              </td>
          </tr>
          <tr>
              <td></td>
              <td></td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="2" disabled>
                      <input type="hidden" name="comentario">
                      <label class="custom-control-label" for="2"></label>
                  </div>
              </td>
          </tr>
          <tr>
              <td></td>
              <td></td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="3" disabled>
                      <input type="hidden" name="comentario">
                      <label class="custom-control-label" for="3"></label>
                  </div>
              </td>
          </tr>
      </tbody>
  </table>
  
  <div class="modal fade" id="modalFolio" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <!--Header-->
        <div class="modal-header">
          
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <!--Body-->
        <div class="modal-body">
        <div class="table-responsive text-nowrap">
          <table class="table table-bordered table-hover" id="tbl_folio">
            <thead>
              <tr>
                <th>Cliente</th>
                <th>Cantidad</th>
                <th>Comentario</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="tbody_folio">
                <tr>
                <td>CL 1</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
                <button class='btn btn-sm btn-warning replay' type='button' name='button'>
                <i class='fas fa-chevron-circle-right'></i>agregar a pedido</button>
                </td>
              </tr>
               <tr>
                <td>CL 2</td>
                <td>100</td>
                <td>Pedido urgente</td>
                <td>
                <button class='btn btn-sm btn-warning replay' type='button' name='button'>
                <i class='fas fa-chevron-circle-right'></i> agregar a pedido</button>
                </td>
              </tr>
            </tbody>
          </table>

          </div>

        </div>
        <!--Footer-->
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Salir</button>
        </div>
      </div>
    </div>
  </div>

¿Cómo puedo hallar dichos elementos para hacerles cambios?

4
  • cual es tu problema ? Commented el 25 sept. 2019 a las 17:47
  • @FRANCISCOJ.BLANCO Mi problema es como detectar el input hidden de esa linea vaciá y poder habilitar el checkbox de esa linea, si cumple con la condicion
    – MoteCL
    Commented el 25 sept. 2019 a las 17:48
  • Hola creo que entiendo lo que buscas, aun así hay muchas cosas que aclarar, buscas que los elementos del modal se pasen a la tabla ¿no es así?, ¿deben agregarse o agruparse y sumarse según el cliente? Commented el 25 sept. 2019 a las 18:54
  • @the-breaker pasar la linea que se selecciono del modal a la tabla #pedido, y poder agregar el comentario al input hidden y si cumple con la condición activar el` checkbox` de esa linea. El sistema actual carga un listado acuerdo a su area, pero ahora quieren poder agregar pedidos de otra areas eligiendo desde el modal
    – MoteCL
    Commented el 25 sept. 2019 a las 19:09

1 respuesta 1

2

Considero que el método empleado en este problema no es muy practico, para que el código funcione se tomaron en cuenta los siguientes puntos:

  • Se pueden guardar los elementos accedidos por jquery en una variable para continuar usándolos en otros cambios.
  • Al buscar un elemento con find() por su nombre, este debe estar entre comillas (name='Escoge').
  • Se emplea $(this) para desplazarse en el elemento en el que se aplica la función (en este caso #tbl_folio), su valor no se reemplaza por el ultimo elemento accedido (ni nada por el estilo).

Se hicieron algunos cambios en el código HTML para mostrar el funcionamiento de la solución, luego puede emplearse código jquery con el código HTML orginal del problema y funcionará de igual manera.

$('#tbl_folio').on('click', 'button.replay', function(e) {

    var cliente = $(this).closest('tr').find('td:eq(0)').text();
    var cantidad = $(this).closest('tr').find('td:eq(1)').text();
    var comentario = $(this).closest('tr').find('td:eq(2)').text();
    
     $("#pedido tbody > tr:has(td:eq(0):empty):first").find('td:eq(0)').text(cliente);
     var act = $("#pedido tbody > tr:has(td:eq(1):empty):first");
     act.find('td:eq(1)').text(cantidad);
     var com = act.find('td:eq(2)')
     com.find("input[name='comentario']").val(comentario);
     
    if (cantidad > 50) {
        com.find("input[name='Escoge']").attr('disabled', false);
        com.find(".custom-control-label").text('URGENTE');
    } else 
        com.find("input[name='Escoge']").attr('disabled', true);
        
});
.hidden1{
    color: #aaa;
}
<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" data-toggle="modal" data-target="#modalFolio">
  Listado de pedidos
</button>
  <table id="pedido" class="table table-bordered text-center table-sm">
      <thead>
          <tr class="table-info">
              <th width="5%">CLIENTE</th>
              <th width="5%">Cantidad</th>
              <th width="3%">&nbsp; </th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td></td>
              <td></td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="1" disabled>
                      <input class="hidden1" name="comentario" >
                      <label class="custom-control-label" for="1"></label>
                  </div>
              </td>
          </tr>
          <tr>
              <td></td>
              <td></td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="2" disabled>
                      <input class="hidden1" name="comentario" >
                      <label class="custom-control-label" for="2"></label>
                  </div>
              </td>
          </tr>
          <tr>
              <td></td>
              <td></td>
              <td style="text-align: center; vertical-align: middle;">
                  <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" name="Escoge" class="custom-control-input" id="3" disabled>
                      <input class="hidden1" name="comentario" >
                      <label class="custom-control-label" for="3"></label>
                  </div>
              </td>
          </tr>
      </tbody>
  </table>
  
  <div class="modal fade" id="modalFolio" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <!--Header-->
        <div class="modal-header">
          
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <!--Body-->
        <div class="modal-body">
        <div class="table-responsive text-nowrap">
          <table class="table table-bordered table-hover" id="tbl_folio">
            <thead>
              <tr>
                <th>Cliente</th>
                <th>Cantidad</th>
                <th>Comentario</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="tbody_folio">
                <tr>
                <td>CL 1</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
                <button class='btn btn-sm btn-warning replay' type='button' name='button'>
                <i class='fas fa-chevron-circle-right'></i>+</button>
                </td>
              </tr>
               <tr>
                <td>CL 2</td>
                <td>100</td>
                <td>Pedido urgente</td>
                <td>
                <button class='btn btn-sm btn-warning replay' type='button' name='button'>
                <i class='fas fa-chevron-circle-right'></i>+</button>
                </td>
              </tr>
            </tbody>
          </table>

          </div>

        </div>
        <!--Footer-->
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Salir</button>
        </div>
      </div>
    </div>
  </div>

De esa forma ya funciona como esperas, saludos.

2
  • 1
    Perfecto mi budda funciono muy bien!
    – MoteCL
    Commented el 25 sept. 2019 a las 19:58
  • cuida el cuerpo y la mente, por que los dos son uno, saludos. Commented el 25 sept. 2019 a las 20:04

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.