0

Não sei programar em javascript então gostaria de uma ajuda de vocês, de como proceder nesse caso.
Nesse código abaixo gostaria de saber como faço uma calculadora dinâmica, por linha, igual ao exemplo abaixo. eu só tenho que colocar a quantidade: Exemplo de Imagem

<table class="table table-bordered table-primary">
<thead>
    <tr>
        <th style="width: 20%;" >Cod</th>
        <th style="width: 20%;">Data</th>
        <th style="width: 10%;">Tipo</th>
        <th style="width: 5%;">Quantidade</th>
        <th class="text-center" style="width: 14%;">Valor | Desconto</th>
        <th class="text-center" style="width: 14%;">Valor Total</th>
    </tr>
</thead>
<tbody>

<?

$cmd = "SELECT * FROM cotacao";      
    $produtos = mysql_query($cmd);
    $total = mysql_num_rows($produtos);
    while ($linha = mysql_fetch_array($produtos)) {

$valor = $linha['valor'];
$data_abertura = $linha['data_abertura'];
$cod = $linha['cod'];

?>
        <tr class="selectable">
        <td class="center"><?echo $cod?></span></td>
        <td class="center"><?echo $data_abertura?></td>

        <td class="center"><?echo $p_tipo_veiculo?></td>
        <td class="center"><input type="text" name="qtd" /></td>
        <td class="text-center">
        <font size="3.5"> <input type="text" value="<?echo $valor?>" />        
        </td>
        <td class="text-center">
        <input type="text" name="total" value="resultado" />
        </td>
        </tr>

        <?}?>


       </tbody></table>

2 Respostas 2

1

Podes fazer assim:

function getClosest(el, tagName) {
    while (el = el.parentNode) {
        if (el.tagName.toLowerCase() == tagName) return el;
    }
}

window.addEventListener('keyup', function (e) {
    // caso não seja o input pretendido
    if (e.target.name != 'qtd' || e.target.tagName != 'INPUT') return;

    // ir buscar o valor inserido
    var value = parseFloat(e.target.value);

    // ir buscar o outro valor dentro da mesma linha
    var tr = getClosest(e.target, 'tr');
    var valor = tr.querySelector('input[name="valor"]');

    // calcular a soma
    var sum = value + parseFloat(valor.value);

    // inserir a soma no input total da mesma linha
    tr.querySelector('input[name="total"]').value = sum;
});

Exemplo: http://jsfiddle.net/mxjfLu1x/

Deixei comentários no código. A função getClosest() é para subir no DOM e ir buscar o tr para ir buscar depois inputs que estão na mesma linha.

Repara que adicionei no HTML name="valor" no input do meio. Assim facilita e simplifica a encontrar esse input.

Coloquei o oscultador de eventos no window pois tenho a sensação que essa tabela é dinamica e saaim não tens de te preocupar com delegação.

5
  • Perfeito era isso mesmo que preciso, mais to com um probleminha. é que tenho que colocar o name="valor" com [] ficaria assim name="valor[]" name="qtd[]" name="total[]" mais ai, para de fazer o caulculo como posso acertar isso? Commented 1/06/2015 às 3:02
  • @FabioHenrique nesse caso é só acrescentar [] nas strings do código -> jsfiddle.net/mxjfLu1x/1
    – Sergio
    Commented 1/06/2015 às 6:38
  • 1
    Eu tinha feito isso mais não tinha funcionado.... Agora ta funcionando perfeitamente. Blz Commented 1/06/2015 às 17:52
  • Parceiro...Voce saberia me informar como faço para que total apareça formatado exemplo 0.00,00 – Commented 1/06/2015 às 22:26
  • @FabioHenrique dá uma olhada aqui: pt.stackoverflow.com/q/11018/129
    – Sergio
    Commented 2/06/2015 às 8:26
0

Ta um pouco confuso mas acho que entendi.

Primeiro, para múltiplos inputs, você coloca assim:

<input type="text" name="qtd[]" />

Depois você recupera os valores novamente dentro do seu while para somar com o que precisa:

<?

$cmd = "SELECT * FROM cotacao";      
$produtos = mysql_query($cmd);
$total = mysql_num_rows($produtos);

$i = 0; //inicia o contador    

while ($linha = mysql_fetch_array($produtos)) {

    $valor = $linha['valor'];
    $data_abertura = $linha['data_abertura'];
    $cod = $linha['cod'];

    $resultado = $_POST["qtd"][$i] + $valor; // aqui ta o resultado
    $i++; //incrementa o contador para pegar o próximo valor

?>

Depois você exibe o resultado:

<input type="text" name="total" value="<?echo $resultado?>" />
2
  • Ola Essa parte [] array eu sei como fazer a minha dificuldade e no calculo dinâmico quando eu colocar um numero no primeiro campo e fazer o resultado do calculo instantaneamente no ultimo campo Commented 31/05/2015 às 3:08
  • Entendi, então acredito que o @Sergio respondeu sua pergunta
    – dm707
    Commented 31/05/2015 às 17:02

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 .