итоги строк таблицы jquery и общий итог

В настоящее время я пишу небольшой плагин для специалистов по ремонту компьютеров, и сейчас я пытаюсь закодировать раздел счета, но без особого успеха!

У меня есть поля, заполняемые из базы данных, но я пытаюсь использовать jquery для обновления итоговых значений строк и итоговой суммы счета.

Вот краткое изображение того, что я пытаюсь сделать!

введите описание изображения здесьЯ пытаюсь заставить его обновлять итоги при загрузке страницы и при изменении значения в Текстовые поля стоимости и количества.

$(document).ready(function() {
    $("#invoiceitems tbody tr").each(function() {
        $(this).change(function() {
            updateTotal();
        });
    });
});

function updateTotal() {

    //Calculate Subtotal for each item
    var quantity = $('.quantity').val();
    var price = $('.price').val();
    var subtotal = parseInt(quantity) * parseFloat(price);
    $('.subtotal').text(subtotal);
    //Calculate Grand Total
    var sum = 0;
    $('.linetotal').each(function() {
        sum += parseFloat($(this).text());
    });
    $('#grandTotal').html(parseFloat(sum));
}​

Нашел здесь этот код, но я понятия не имею и не могу заставить его работать!

Будем очень признательны за какое-то направление / помощь!

Большое спасибо, Джейс


php jquery invoice totals
person Jason Mutton    schedule 07.09.2012    source источник
comment
Можете ли вы показать любой HTML-код или, что еще лучше, использовать jsfiddle.net?   -  person Dom    schedule 08.09.2012
comment
jsfiddle.net/7gaWf/1 Сначала я не уверен, правильно ли я сделал это время, используя скрипку!   -  person Jason Mutton    schedule 08.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

Похоже, вы новичок в jQuery .. !! Хорошее начало .. Нетрудно взять его в руки ..

Здесь .price, .quantity и .lineTotal соответствуют названиям классов столбцов, о которых они говорят. GrandTotal - это идентификатор Total в таблице.

Я разместил обновленный рабочий пример для случая, с которым вы пытаетесь работать. Следует быть хорошим началом ..

Но позаботьтесь о том, чтобы я не добавил никаких условий, чтобы проверить, действителен ли ввод пользователя или нет ... Попробуйте добавить их во время развертывания ... Сообщите мне, если у вас возникнут какие-либо трудности при его декодировании.

person Sushanth --    schedule 07.09.2012
comment
ВАУ! Я только что реализовал это, и он отлично работает! Еще одна вещь, как мне заставить его генерировать итоги при начальной загрузке страницы? - person Jason Mutton; 08.09.2012
comment
Просто немного подправьте свой код .. Разделите метод updateTotals () на 2 части .. Проверьте обновление FIDDLE выше .. Я разделил их на две функции. И просто вызовите CalculateTotals () в Document.Ready .. - person Sushanth --; 08.09.2012
comment
jsfiddle.net/BE8c7/1 Это то, что у меня есть на данный момент. Кажется, не получается заставить его генерировать итоги / итоги строки при загрузке. И по какой-то причине он, кажется, работает, когда я добавляю новый элемент текстового поля с помощью кнопки. - person Jason Mutton; 08.09.2012
comment
Вам необходимо назначить событие при добавлении новых элементов .. В противном случае элементы не будут прикреплены к обработчикам событий .. Проверьте это обновление FIDDLE jsfiddle.net/sushanth009/BE8c7/5 - person Sushanth --; 09.09.2012
comment
Это отлично сработало! Мне также удалось ограничить поля цены и количества только числами! Есть ли у кого-нибудь предложения о том, как сохранить это в базе данных? У меня есть две таблицы, счета-фактуры и элементы счетов-фактур. Я думал, что когда форма будет отправлена, она удалит все текущие элементы счета для этого счета и прочитала все из представленной формы. Звучит как хороший вариант? Насколько я понимаю, попытка выяснить, что было обновлено и что является новым, будет сложной задачей! - person Jason Mutton; 09.09.2012

arrow_upward
1
arrow_downward

Рассмотрим этот простой HTML в качестве примера:

<table>
<tr>
<td>
<input type="text" name="unitCost[]" id="unitCost_1" value="15.99" class="editable"/>
</td>
<td>
<input type="text" name="quantity[]" id="quantity_1" value="1" class="editable"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="unitCost[]" id="unitCost_2" value="2.50" class="editable"/>
</td>
<td>
<input type="text" name="quantity[]" id="quantity_2" value="1" class="editable"/>
</td>
</tr>
</table>

Я думаю, вы захотите изменить свой jQuery, чтобы он выглядел примерно так:

$(document).ready(function() {
    updateTotal();

    $(".editable").live("change", function() {
        updateTotal();
    });
});

Не видя вашего реального HTML, трудно сказать, что с вами не так updateTotal() function

person Patrick Q    schedule 07.09.2012