Add columns from a table to a total field and repeat the sum with each new row

Question

Add columns from a table to a total field and repeat the sum with each new row

Navigation

#1 by (3 votes)

3

I have a table with some columns for typing values and I need to add the total of these values in an end column.

The sum is easy to do, however the table and dynamics are generated several lines, and when I try to add the columns again in the new line, I am also adding the result of the previous lines.

I think I should have to set my javascript call as default for the new calculation line but I'm not sure how to do it see example

Note that in the first column the total adds up correctly, in the second it adds some tbm, but adds the value together with the result of the previous field.

The PHP code looks like this:

<?php for ($cont = 1; $cont <= $quantidadeRegistros; $cont++): ?> 
<tr>
    <?php for ($i = 1; $i < 5; $i++): ?>
        <td><input class='form-control calcular' type='text' name='quantidade[]' onkeyup='calcular(<?php echo $cont ?>)' </td>
    <?php endfor; ?>
    <td>
        <input class='form-control' type='text' name='total[]' id='result-<?php echo $cont ?>' readonly />
    </td>
</tr>
<?php endfor; ?>

And the javascript like this:

$(document).ready(function () {
 function calcular(id) {
        var campo = 'result-'.concat(id);
        var soma = $('.calcular').get().reduce(function (soma, el) {
            return (parseInt(el.value, 10) || 0) + soma;
        }, 0);
        document.getElementById(campo).value = soma;
    }
});

I think that if I define that with each line the sum must be started from scratch I solve the problem, but I did not identify how to do it

php javascript

asked by anonymous 04.01.2017 / 12:37

1 answer

Error handling PHP PDO AuthorizeAttribute in Controlller and Actions

score 3 · Accepted Answer

The trick here to not add to those of the previous line is in this line $(this).parents('tr').find('input.calcular') where we are going to "ask the parent element, tr (line), what the values of the children with the class calcular , , only the values of the child inputs of this line ( tr ) with the class calculate are counted for this calculation.

Changing a little your structure, but I create the result you want is this:

$('.calcular').on('keyup change', function() {
	var total = 0;
	$(this).parents('tr').find('input.calcular').each(function(){
		var val = parseInt($(this).val());
		if(!isNaN(val)) {
			total += parseInt(val);
		}
	});
	$(this).parents('tr').find('input.total').val(total);
});

input {
 width: 70px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control total' type='text' name='total[]' id='result-1' readonly /></td>
	</tr>
	 
	<tr>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control calcular' type='number' name='quantidade[]'</td>
		<td><input class='form-control total' type='text' name='total[]' id='result-2' readonly /></td>
	</tr>
</table>

I reduced the inputs so that they were all visible, I also changed them to type=number