PHP Calculator Table

0

I do not know how to program in javascript so I would like some help from you, how to proceed in this case.   In this code I would like to know how to do a dynamic calculator,   per line, same as the example below. I just have to put the amount:

<tableclass="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>
    
asked by anonymous 30.05.2015 / 22:34

2 answers

1

You can do 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: link

I left comments in the code. The getClosest() function is to go up in the DOM and fetch tr to fetch later inputs that are on the same line.

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

I put the event dropper in window because I have the feeling that this table is dynamic and saaim do not have to worry about delegation.

    
31.05.2015 / 10:13
0

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 retrieve the values again within your while to add to 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?>" />
    
31.05.2015 / 04:21