PHP Calculator Table

Question

I can’t program in javascript so I’d like a little help from you, on how to proceed in this case.
In this code below I would like to know how I make a dynamic calculator, per line, equal to the example below. I just have to put the amount:

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

Answer 1

You can do it like this:

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;
});

Example: http://jsfiddle.net/mxjfLu1x/

I left comments in the code. The function getClosest() is to climb into the DOM and get the tr to fetch after inputs that are on the same line.

Note that I added it to HTML name="valor" in the middle input. This makes it easier and simpler to find this input.

I put the event receiver on window because I have the feeling that this table is dynamic and so you don’t have to worry about delegation.

Answer 2

It’s a little confusing but I think I understand.

First, for multiple inputs, you put it like this:

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

Then you recover the values again inside your while to add up with what you need:

<?

$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

?>

Then you display the result:

<input type="text" name="total" value="<?echo $resultado?>" />