Taking value from an array

Question

I am trying to get the value of a table field created with Ajax. With the function below, all fields with the name qtde appear, including what I need. I need to make a simple account of a typed field except that created (qtde - qtde_trans), but it’s complicated.

Function that picks all fields with the name Qtde:

$("input[name^='qtde']").each(function() {
    console.log($(this).val());
});

Return (the value I want, in the calculation line, is the 2000):

Whole function I’m testing (with this.val I get the typable field qtde_trans):

function calc_dif() {
  if ($(this).val().length > 0) {
       var total = $(this).val();
       $("input[name^='qtde']").each(function() {
         console.log($(this).val());
       });
       if ($("#qtde").val() < $("#qtde_trans").val()) {
          alert("Menor");
       }else{
       alert(total2);
       }
  }
}

$(function() {
  var $table = $('#locais');
  $table.on('change', '.input', calc_dif);
  $("#qtde_trans").on('change', calc_dif);
});

How the table is created:

 for(var i = 0;i<data.length;i++){
                              HTML += "<tr><td><input type = 'text' size = '3' name = 'status[]' id = 'status[]' value=" + data[i].status + " readonly></td>";
                              HTML += "<td><input type = 'text' size = '5' name = 'lote[]' id = 'lote[]' value=" + data[i].lote + " readonly></td>";
                              HTML += "<td><input type = 'text' size = '10' name = 'endereco[]' id = 'endereco[]' value=" + data[i].endereco + " readonly></td>";
                              HTML += "<td><input type = 'text' size = '6' name = 'validade[]' id = 'validade[]' value=" + data[i].validade + " readonly></td>";
                              HTML += "<td><input type = 'text' size = '2' name = 'qtde[]' id = 'qtde[]' value=" + data[i].qtde + " readonly></td>";
                              HTML += "<td><input type = 'number' style = 'width: 25px;' name = 'qtde_trans[]' id = 'qtde_trans[]' class='input'></td></tr>";
                            }

Example of the table that loads according to the database data:

Answer 1

You can use the .find() and the .closest() to search only on the line on which the change happens. It would be like this:

function calc_dif() {
  var qtde = $(this).closest('tr').find('[name="qtde[]"]');
  alert(qtde.val());
}

$(function() {
  $('#locais').on('change', '.input', calc_dif);
  $("#qtde_trans").on('change', calc_dif);
});

Answer 2

This is how I would do it (snippet tested in Firefox 67.0.4). I would create the table html already with onChange in the field that will be changed with the calculation Function passing as parameter the element itself (this).

This makes it easier to find the line being changed by taking the first Parent (td) and the second Parent (tr) and find the field to be changed.

var data = [{status:"Status 01", lote:"345356", endereco:"endereco", validade:"05/05/2019",qtde:300},
{status:"Status 01", lote:"345356", endereco:"endereco", validade:"05/05/2019",qtde:300},
{status:"Status 01", lote:"345356", endereco:"endereco", validade:"05/05/2019",qtde:200},
{status:"Status 01", lote:"345356", endereco:"endereco", validade:"05/05/2019",qtde:400},
{status:"Status 01", lote:"345356", endereco:"endereco", validade:"05/05/2019",qtde:600}];

var HTML = "<table class='myTable'> "
HTML += "<thead><tr><th>Status</th><th>Lote</th><th>Endereço</th><th>Validade</th><th>Qtde</th><th>Qtde. Transferir</th></tr></thead>";
for(var i = 0;i<data.length;i++){
  HTML += "<tr><td><input type = 'text' size = '3' name = 'status[]' id = 'status[]' value=" + data[i].status + " readonly></td>";
  HTML += "<td><input type = 'text' size = '5' name = 'lote[]' id = 'lote[]' value=" + data[i].lote + " readonly></td>";
  HTML += "<td><input type = 'text' size = '10' name = 'endereco[]' id = 'endereco[]' value=" + data[i].endereco + " readonly></td>";
  HTML += "<td><input type = 'text' size = '6' name = 'validade[]' id = 'validade[]' value=" + data[i].validade + " readonly></td>";
  HTML += "<td><input type = 'text' size = '2' name = 'qtde[]' id = 'qtde[]' value=" + data[i].qtde + " readonly></td>";
  HTML += "<td ><input type = 'number' name = 'qtde_trans[]' id = 'qtde_trans[]'  onchange='calc_dif(this)' style='width: 50px !important;' ></td></tr>";
}

HTML += "</table>";

$("#content")[0].innerHTML = HTML ;


function calc_dif(e) {
  var fieldChange = $(e.parentElement.parentElement).find("input[id*=qtde]");
  fieldChange[0].value -= e.value;
  //ou qualquer outro calculo que queira.
}

table.myTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.myTable td, table.myTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.myTable tbody td {
  font-size: 13px;
}
table.myTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.myTable thead {
  background: #A40000;
  background: -moz-linear-gradient(top, #bb4040 0%, #ad1919 66%, #A40000 100%);
  background: -webkit-linear-gradient(top, #bb4040 0%, #ad1919 66%, #A40000 100%);
  background: linear-gradient(to bottom, #bb4040 0%, #ad1919 66%, #A40000 100%);
  border-bottom: 2px solid #444444;
}
table.myTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.myTable thead th:first-child {
  border-left: none;
}

table.myTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.myTable tfoot td {
  font-size: 14px;
}

input {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 5px; 
  width: 70px;
  height: 10px;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content"></div>

Answer 3

I usually work like this, It would not be recommended to pick up the value with the each() just by returning from the whole list, In this case I put a id in each td as I did, and I take the value of the respective line(tr) clicked as in snipt below, and mapped the change of qtdtrans by name by id would not work, I tried to mount closer to your code, see if it can adapt

$(document).ready(function(){
$("input[name='qtde_trans']").change(function(){
var qtdTrans = $(this).val();
var qtd = $(this).parent("td").parent("tr").find("td[id=tdQtd] input").val();
alert(qtd);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Qtd</th>
<th>Qtd Trans</th>
</tr>
<thead>
<tbody>
<tr>
   <td id='tdQtd'>
      <input type = 'text' size = '2' name = 'qtde' value='2000'>
   </td>
<td>
   <input type = 'number' style = 'width: 25px;' name='qtde_trans' class='input'>
   </td>
</tr>
<tr>
   <td id='tdQtd'>
      <input type = 'text' size = '2' name = 'qtde' value='5000'>
   </td>
<td>
   <input type = 'number' style = 'width: 25px;' name='qtde_trans' class='input'>
   </td>
</tr>
<tbody>
</table>