2

Olá pessoal estou tentando fazer uma subtração nos campos Necessidade - Saldo e o resultado no Solicitado, da tabela abaixo, só está funcionando o primeiro item, já tentei passar para um array e pegar posição por posição no JavaScript mas não funcionou também e como estou usando DataTables não tenho ideia de como esses ids estão sendo gerados pelo plugin, já fiz um inspecionar elemento e todos os ids tem o mesmo nome, alguém pode me explicar como faço para mandar esses valores em sequência para o JavaScript.

TABELA: inserir a descrição da imagem aqui

As linhas da tabela são geradas através de consulta no banco de dados, e o código das linhas está assim:

<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>

E no 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;
}
3
  • Olá amigo, não manjo muito de DataTables, mas acredito que você não deve manipular diretamente os IDs, mas sim usar a API do DataTables para isso. Dê uma olhada nisso aqui, veja se ajuda: datatables.net/reference/api/rows().data() 5/08/2019 às 14:35
  • Opa, valeu pela dica man, eu dei uma olhada e parece que dessa forma também da para solucionar o problema, vou ver se consigo fazer usando esse método. 6/08/2019 às 0:02
  • Maravilha. É a forma mais correta. Sempre prefira usar o que está na documentação do que manipular DOM diretamente, já que caso mudar a estrutura de como os dados serão mostrados, as informações da API dificilmente irá mudar (só por que mudou a estrutura, entende?). Ou seja, é menos trabalhoso ler a documentação e fazer do jeito certo do que fazer gambiarra.. haha 6/08/2019 às 0:58

1 Resposta 1

1

Remova todos os id's repetidos. Não pode repetir o mesmo id em mais de um elemento na página.

Envie o this para a função calcularvalor no onfocus:

onfocus="calcularvalor(this);"

O this será o input na função, e você busca os inputs das colunas necessidade e saldo usando .closest("tr").find("nome do input") e pega o valor com .val().

O .closest("tr") seleciona a linha inteira e o .find("nome do input") irá buscar na linha toda o elemento pelo name. Por exemplo, para buscar o input referente ao saldo na mesma linha:

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

Seu código ficaria desta forma:

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

Quando você focar no input da coluna solicitado, irá chamar a função e fazer a subtração dos valores.

1
  • muito bom man! gostei da solução e não achei complicado de entender, eu ainda sou leigo em JavaScript preciso aprofundar mais para aprender outras funções, eu já vi e até usei o find mas não sabia que dava para pegar o name do input dessa forma. Valeu por ajudar e agregar mais conhecimento pra mim, muito grato! 5/08/2019 às 23:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .