0

Captura de la imagen

Tengo esta tabla, como se ve en la captura, donde se agregan los datos dinamicamente del buscador con jQuery.

Necesito obtener el valor del Input Cantidad, cuando se active el Checkbox del Descuento.

En cada fila td tengo Inputs y una columna tr con el ID del producto, por el momento solo he logrado capturar el ID y el Estado del CheckBox:

    $(document).on("click",".activate_descuento",function(){
          var valores = "";
          $(this).parents("tr").find("td").each(function() {
            valores += $(this).html() + "\n";
          });
          console.log(valores);
          alert(valores);
    });

NOTA: Si hay muchos productos que pueda agregar, la Cantidad como otros Inputs tienen el mismo ID y NAME por lo tanto se comportará como vector.

3
  • Puedes agregar el HTML o el PHP que estas usando para armar tu tabla? Creo que le estas dando mucha vuelta a algo tan sencillo, pero habrá que analizar tu código. Commented el 21 jun. 2017 a las 18:37
  • @AlejandroHurtado es necesario que compartas un poco sobre la estructura HTML con la que armas la tabla.
    – Agustin M.
    Commented el 21 jun. 2017 a las 18:49
  • Un extracto le genero cada TR con sus respectivos TD y dentro Inputs, algo asi: ` rhtml = '<tr><td> ....... <td> <input type="text" name="cantidad" class="form-control tcantidad" style="width: 100px;"></td> ..... </tr>'; y asi agrego con Jquery $('#'+id_tabla).append(rhtml); ` Commented el 21 jun. 2017 a las 19:26

2 respuestas 2

1

Planteare una respuesta en base a mi percepción de la imagen, pues a mi parecer estas usando campos de texto dentro de las celdas, a continuación te propongo una idea sencilla «Observa el resultado en la consola del ejemplo»

$(".descuento").on("click",function() {
  var fila = $(this).parents("tr");
  var nombre = fila.find(".nombre").val();
  var cantidad = fila.find(".cantidad").val();
  var precio = fila.find(".precio").val();
  var stock = fila.find(".stock").text();
  
  // Suponiendo que así determinas el descuento
  var descuento = 0;
  if (fila.find(".descuento").prop("checked")) {
      descuento = 0.15;
  }
  
  console.log(`El producto ${nombre} cuesta ${cantidad*precio*(1-descuento)}`);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table">
    <tr>
        <td><input type="text" class="nombre" disabled value="AMBIANTE X 1LT"></td>
        <td><input type="number" class="cantidad" value="32"></td>
        <td><input type="number" step="any" class="precio" disabled value="18.00"></td>
        <td><span class="stock">38</span></td>
        <td><input type="checkbox" class="descuento" checked></td>
        <td><button class="quitar">Quitar</button></td>
    </tr>
    <tr>
        <td><input type="text" class="nombre" disabled value="CHANTPAK X 1 LT"></td>
        <td><input type="number" class="cantidad"></td>
        <td><input type="number" step="any" class="precio" disabled value="21.00"></td>
        <td><span class="stock">200</span></td>
        <td><input type="checkbox" class="descuento"></td>
        <td><button class="quitar">Quitar</button></td>
    </tr>
</table>

Te darás cuenta que aprovechamos las clases para individualizar cada uno de los datos de cada celda, sin embargo si me pidieses una sugerencia seria usar los atributos data-* y dejes las clases para aplicar estilos.

Espero que les sea de mucha utilidad.

1
  • Es exactamente lo que quería, muchas gracias Neder Commented el 21 jun. 2017 a las 19:35
1

Cree una demo para ayudarte con una mejor referencia: (también disponible en JSFiddle)

$(document).ready(function() {
  $(document).on('change', '.checkbox', function() {
    if (this.checked) {
      console.log($(this).parents('tr').find('td.cantidad').html());
    }
  });
});
table, th, td {
  border: 1px solid #000;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<table style="width:100%;">
  <tr>
    <th>Nombre</th>
    <th>Cantidad</th> 
    <th>Stock</th>
    <th>Descuento</th>
    <th>Acción</th>
  </tr>
  <tr>
    <td>example-name-1</td>
    <td class="cantidad">32</td> 
    <td>18</td>
    <td>38</td>
    <td><input class="checkbox" type="checkbox"></td>
  </tr>
  <tr>
    <td>example-name-2</td>
    <td class="cantidad">39</td> 
    <td>135</td>
    <td>13</td>
    <td><input class="checkbox" type="checkbox"></td>
  </tr>
</table>

Cree una table en la cual al td en donde está la cantidad le agregué una clase "cantidad", el cual usarás luego para poder acceder al valor del mismo.

4
  • Primeramente gracias por tu ilustración @ecastellano, todo genial, solo tengo un pequeño detalle, dentro de TD de CLASS Cantidad tengo un Input, asi : <td class="act_cantidad"> <input type="text" name="cantidad" class="form-control tcantidad" required style="width: 100px;"></td> Como puedo acceder hasta su valor del CANTIDAD?, gracias una vez mas. Commented el 21 jun. 2017 a las 18:35
  • En ese caso deberías utilizar console.log($(this).parents('tr').find('td.cantidad > .cantidad').html()); Con el símbolo > podrás acceder a los elementos hijos de tu td, el cual sería tu input de cantidad Commented el 21 jun. 2017 a las 19:33
  • @ecastellano aunque si bien puede acceder a los elementos usando descendencia en el selector una vez obtienes un elemento tipo input, la manera de capturar su valor es usando .val() en vez de .html()
    – NekoOs
    Commented el 21 jun. 2017 a las 19:40
  • Gracias por tu ayuda. Commented el 21 jun. 2017 a las 19:41

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.