Вычисление суммы переменного числа столбцов HTML-таблицы с использованием Javascript - PullRequest
Новая
       0

Вычисление суммы переменного числа столбцов HTML-таблицы с использованием Javascript

3 голосов
/ 29 мая 2011

У меня есть таблица с большим количеством столбцов, и каждый столбец состоит из текстового поля с числовым значением, которое можно изменить. Последний столбец таблицы должен содержать сумму всех столбцов. Теперь вот мой вопрос: как я могу изменить сумму в реальном времени, используя JavaScript? Например, если значение столбца изменяется, сумма должна быть изменена, чтобы соответствовать новым значениям.

Ниже мой стол: 

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

Спасибо.

Ответы [ 2 ]

3 голосов
/ 29 мая 2011 
<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>

Это должно к подвоху.

2 голосов
/ 29 мая 2011

Редактировать:

После обсуждения в комментариях это окончательная версия: 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>

Как обычно, яне уверен, что это оптимально, но, похоже, это работает:

См .: 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);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...