Subtraction in rows of a table using Datatables

Question

Hello folks I am trying to make a subtraction in the fields Need - Balance and the result in Requested, from the table below, is only working the first item, I tried to move to an array and pick position by position in Javascript but it didn’t work either and as I am using Datatables I have no idea how these ids are being generated by the plugin, I have already made an element inspect and all ids have the same name, can someone explain me how to send these values in sequence to Javascript.

TABLE:

The table rows are generated through query in the database, and the line code is like this:

<tbody>
                <?php while($dados = mysqli_fetch_assoc($qry2)){ ?>
                <tr>
                    <td>
                        <input type="checkbox" name="selecionar[]" value="<?php echo $dados['codproduto'];?>" readonly>
                    </td>
                    <td>
                        <input type="text" maxlength="4" name="codigo[]" id="codigo" value="<?php echo $dados['codproduto'];?>" onkeyup="somenteNumeros(this)"/>
                    </td>
                    <td id="descricao">
                        <?php echo $dados['descricao'];?>
                    </td>
                    <td>
                        <input type="number" maxlength="4" name="necessidade[]" id="necessidade" value="0" onchange="verifica(this)"/>
                    </td>
                    <td>
                        <input type="number" maxlength="4" name="saldo[]" id="saldo" value="0" onchange="verifica(this)"/>
                    </td>
                    <td>
                        <input type="number" maxlength="4" name="solicitado[]" id="solicitado" value="0" onchange="verifica(this)" onfocus="calcularvalor();"/>
                    </td>
                </tr>
                <?php } ?>
            </tbody>

And in javascript

    function calcularvalor() {

     var n1 = document.getElementById("necessidade").value;
     var n2 = document.getElementById("saldo").value;



     var solicitado = n1 - n2;

    //var n1 = parseInt(document.getElementById('n1').value, 10);
    //var n2 = parseInt(document.getElementById('n2').value, 10);

    document.getElementById('solicitado').value = solicitado;
}

Answer 1

Remove all repeated id’s. You cannot repeat the same id on more than one element on the page.

Send the this for the function calcularvalor in the onfocus:

onfocus="calcularvalor(this);"

The this will be the input in the function, and you search the inputs of the columns necessidade and saldo using .closest("tr").find("nome do input") and takes the value with .val().

The .closest("tr") selects the entire line and the .find("nome do input") will fetch on the line all the element by name. For example, to fetch the input for the balance on the same line:

.find("[name='saldo[]']")

Your code would look like this:

$(document).ready(function(){
    $('#myTable').DataTable();
});

function calcularvalor(e) {

   var n1 = $(e).closest("tr").find("[name='necessidade[]']").val();
   var n2 = $(e).closest("tr").find("[name='saldo[]']").val();

   var solicitado = n1 - n2;

   $(e).val(solicitado);
}

function verifica(){
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="myTable">
   <thead>
      <tr>
      <th>Selecionar</th>
      <th>Codigo</th>
      <th>Descrição</th>
      <th>Necessidade</th>
      <th>Saldo</th>
      <th>Solicitado</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td>
            <input type="checkbox" name="selecionar[]" value="<?php echo $dados['codproduto'];?>" readonly>
         </td>
         <td>
            <input type="text" maxlength="4" name="codigo[]" value="<?php echo $dados['codproduto'];?>" onkeyup="somenteNumeros(this)"/>
         </td>
         <td id="descricao">
            <?php echo $dados['descricao'];?>
         </td>
         <td>
            <input type="number" maxlength="4" name="necessidade[]" value="5" onchange="verifica(this)"/>
         </td>
         <td>
            <input type="number" maxlength="4" name="saldo[]" value="1" onchange="verifica(this)"/>
         </td>
         <td>
            <input type="number" maxlength="4" name="solicitado[]" value="0" onchange="verifica(this)" onfocus="calcularvalor(this);"/>
         </td>
      </tr>
      <tr>
         <td>
            <input type="checkbox" name="selecionar[]" value="<?php echo $dados['codproduto'];?>" readonly>
         </td>
         <td>
            <input type="text" maxlength="4" name="codigo[]" value="<?php echo $dados['codproduto'];?>" onkeyup="somenteNumeros(this)"/>
         </td>
         <td id="descricao">
            <?php echo $dados['descricao'];?>
         </td>
         <td>
            <input type="number" maxlength="4" name="necessidade[]" value="10" onchange="verifica(this)"/>
         </td>
         <td>
            <input type="number" maxlength="4" name="saldo[]" value="5" onchange="verifica(this)"/>
         </td>
         <td>
            <input type="number" maxlength="4" name="solicitado[]" value="0" onchange="verifica(this)" onfocus="calcularvalor(this);"/>
         </td>
      </tr>
   </tbody>
</table>

When you focus on column input solicitado, will call the function and subtract the values.