Geek asks and answers

Calculating the sum of the variable number of html table columns using Javascript

I have a table with a large number of columns, and each column consists of a text field with a numerical value that can be changed. The last column of the table should contain the sum of all columns. Now here is my question: how can I make a real-time amount change using javascript? For example, if a column value is changed, the sum must be changed to match the new values.

The table below is:

<table id="sum_table">
  <tr>
    <td>Column 1</td>
    <td><input type="text" name="val1" value="" /></td>
  </tr>
  <tr>
    <td>Column 2</td>
    <td><input type="text" name="val2" value="" /></td>
  </tr>
  <tr>
    <td>Column 3</td>
    <td><input type="text" name="val3" value="" /></td>
  </tr>
  [...]
  <tr>
    <td>Total</td>
    <td><input type="text" name="total" value="" /></td>
  </tr>
</table>

Thank.

+3
source share
2 answers

Edit:

After discussion in the comments, this is the final version: http://jsfiddle.net/gXdwb/3/

$('#sum_table tr:not(.totalColumn) input:text').bind('keyup change', function() {
    var $table = $(this).closest('table');
    var total = 0;
    var thisNumber = $(this).attr('class').match(/(\d+)/)[1];

    $table.find('tr:not(.totalColumn) .sum'+thisNumber).each(function() {
        total += +$(this).val();
    });

    $table.find('.totalColumn td:nth-child('+thisNumber+') input').val(total);
});

<table id="sum_table" width="600" border="0">
    <tr>
        <td>Sum 1</td>
        <td>Sum 2</td>
        <td>Sum 3</td>
    </tr>
    <tr>
        <td><input type="text" name="textfield" id="textfield" class="sum1" /></td>
        <td><input type="text" name="textfield2" id="textfield2" class="sum2" /></td>
        <td><input type="text" name="textfield3" id="textfield3" class="sum3"/></td>
    </tr>
    <tr>
        <td><input type="text" name="textfield4" id="textfield4" class="sum1" /></td>
        <td><input type="text" name="textfield5" id="textfield5" class="sum2" /></td>
        <td><input type="text" name="textfield6" id="textfield6" class="sum3" /></td>
    </tr>
    <tr>
        <td><input type="text" name="textfield7" id="textfield7" class="sum1" /></td>
        <td><input type="text" name="textfield8" id="textfield8" class="sum2"/></td>
        <td><input type="text" name="textfield9" id="textfield9" class="sum3"/></td>
    </tr>
    <tr>
        <td>Total</td>
        <td>Total</td>
        <td>Total</td>
    </tr>
    <tr class="totalColumn">
        <td><input type="text" name="textfield10" id="textfield10" /></td>
        <td><input type="text" name="textfield11" id="textfield11" /></td>
        <td><input type="text" name="textfield12" id="textfield12" /></td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
    </tr>
</table>

As usual, I'm not sure if this is optimal, but it works:

: http://jsfiddle.net/gXdwb/

$('#sum_table tr:not(:last-child)').bind('keyup change', function() {
    var $table = $(this).closest('table');
    var total = 0;

    $table.find('tr:not(:last-child) input:text').each(function() {
        total += +$(this).val();
    });

    $table.find('input[name="total"]').val(total);
});
+2
<html>
<head>
<script type="text/javascript">
function calc()
{
var sum = parseFloat(document.getElementById('val1').value + document.getElementById('val2').value + document.getElementById('val3').value + [...]);
document.getElementById('total').value = sum;
}
</script>
</head>
<body>
 <table id="sum_table">
  <tr>
    <td>Column 1</td>
    <td><input type="text" id="val1" value="" OnTextChanged="javascript:calc()"/></td>
  </tr>
  <tr>
    <td>Column 2</td>
    <td><input type="text" id="val2" value=""  OnTextChanged="javascript:calc()/></td>
  </tr>
  <tr>
    <td>Column 3</td>
    <td><input type="text" id="val3" value=""  OnTextChanged="javascript:calc()/></td>
  </tr>
  [...]
  <tr>
    <td>Total</td>
    <td><input type="text" id="total" value="" /></td>
  </tr>
 </table>
</body>
</html>

.

+3

More articles:


All Articles