admin管理员组

文章数量:1405751

I have a table with a lot of columns, and each column consists of a text field with a numeric value that can be changed. The last column of the table must hold the sum of all columns. Now here's my question: how can I make the sum change in realtime using javascript? For example if a column value is modified, the sum must be changed in order to fit the new values.

Below is my table:

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

I have a table with a lot of columns, and each column consists of a text field with a numeric value that can be changed. The last column of the table must hold the sum of all columns. Now here's my question: how can I make the sum change in realtime using javascript? For example if a column value is modified, the sum must be changed in order to fit the new values.

Below is my table:

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

  • javascript
  • jquery
  • html
  • forms
Share Improve this question asked May 29, 2011 at 18:41 PsychePsyche 8,78322 gold badges71 silver badges86 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3 
<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>

That should to the trick.

Edit:

After discussion in the ments, this is the final version: http://jsfiddle/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 seems to work:

See: http://jsfiddle/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);
});

本文标签： jqueryComputing the sum of a variable number of html table columns using JavascriptStack Overflow

版权声明：本文标题：jquery - Computing the sum of a variable number of html table columns using Javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744905167a2631579.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。