Capture the value of an Input Text that is inside a Row of a Table, by pressing a Checkbox with jQuery

Question

Capture the value of an Input Text that is inside a Row of a Table, by pressing a Checkbox with jQuery

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have this table, as seen in the capture , where the data is dynamically added to the search engine with jQuery .

I need to get the value of% co_of% Amount , when the% co_of% of the Discount is activated.

In each row Input I have Checkbox and one column td with the ID of the product, for the moment I have only managed to capture the ID and the status of Inputs :

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

NOTE: If there are many products that you can add, the Quantity as other tr have the same CheckBox and Inputs therefore it will behave as a vector.

javascript jquery

asked by Alex Ancco Cahuana 21.06.2017 в 19:08

source

2 answers

1

Create a demo to help you with a better reference: (also available at 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>

Create a table in which the td where the amount is, I added a class "amount", which you will use later to access the value of it.

answered by 21.06.2017 в 20:15

Because when comparing two Drawable resources the value is not the same? Error when deploying an array pointer in C ++

score 1 · Accepted Answer

I will propose an answer based on my perception of the image, because in my opinion you are using text fields inside the cells, then I propose a simple idea "See the result in the example console"

$(".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>

You will notice that we take advantage of the clases to individualize each of the data of each cell, however if you asked me for a suggestion it would be to use the attributes data-* and leave the classes to apply styles.

I hope you find it very useful.