Javascript-форум - Общий подсчёт из нескольких полей

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Общий подсчёт из нескольких полей (https://javascript.ru/forum/dom-window/37277-obshhijj-podschjot-iz-neskolkikh-polejj.html)

Общий подсчёт из нескольких полей

Здравствуйте:write: . Есть 4 таблицы.
В каждой по нескольку десятков вычисляемых input-полей для ввода.
В каждой таблице все поля суммируются и результат выводится в <span></span>.
Таблицы никак не связаны между собой. В общем хочу сделать так, чтобы был ещё один <span></span>, в который суммируются все 4 <span>'а соответствующих четырёх таблиц. Сам никак не дотумкаю.:help: Спасибо заранее. :D

HTML-КОД:

Код:



<div id="calculate">



 <form method="post">

        <table id="tableSelect" class="zebratable" width="100%" cellpadding="0" cellspacing="0">

            <tr>

            <th>Наименование работ</th>

            <th>Ед.изм.</th>

            <th>Колличество</th>

            <th>Цена за единицу</th>

            <th>Сумма</th>

        </tr>

        

        <tr>

                <td>Пробивка штробы по кирпичу</td>

            <td class="vertical">м</td>

            <td>

                    <input id="pos_1" type="text" name="people" value="0">

            </td>

            <td class="vertical" id="pos_1_price">100</td>

            <td id="pos_1_count">0</td>

        </tr>

        

        <tr>

                <td>Пробивка штробы по бетону</td>

            <td class="vertical">м</td>

            <td>

                    <input id="pos_2" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos_2_price">150</td>

            <td id="pos_2_count">0</td>

        </tr>

        

        <tr>

                <td>Прокладка провода</td>

            <td class="vertical">м</td>

            <td>

                    <input id="pos_3" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos_3_price">35</td>

            <td id="pos_3_count">0</td>

        </tr>       

                

    </table>

<div id="count_price"><p>Итого: <span></span></p></div>



</form>

</div>





<div id="calculate2">



 <form method="post">

        <table id="tableSelect2" class="zebratable" width="100%" cellpadding="0" cellspacing="0">

            <tr>

            <th>Наименование работ</th>

            <th>Ед.изм.</th>

            <th>Колличество</th>

            <th>Цена за единицу</th>

            <th>Сумма</th>

        </tr>

        

        <tr>

                <td>Демонтаж радиаторов отопления</td>

            <td class="vertical">шт</td>

            <td>

                    <input id="pos2_1" type="text" name="people" value="0">

            </td>

            <td class="vertical" id="pos2_1_price">150</td>

            <td id="pos2_1_count">0</td>

        </tr>

        

        <tr>

                <td>Демонтаж труб отопления,водопровода,канализации</td>

            <td class="vertical">мп</td>

            <td>

                    <input id="pos2_2" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos2_2_price">60</td>

            <td id="pos2_2_count">0</td>

        </tr>

        

        <tr>

                <td>Демонтаж сантехнических приборов</td>

            <td class="vertical">шт</td>

            <td>

                    <input id="pos2_3" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos2_3_price">250</td>

            <td id="pos2_3_count">0</td>

        </tr>       

                

    </table>

 <div id="count_price2"><p>Итого: <span></span></p></div>

</form>



</div>





<div id="calculate3">



 <form method="post">

        <table id="tableSelect3" class="zebratable" width="100%" cellpadding="0" cellspacing="0">

            <tr>

            <th>Наименование работ</th>

            <th>Ед.изм.</th>

            <th>Колличество</th>

            <th>Цена за единицу</th>

            <th>Сумма</th>

        </tr>

        

        <tr>

                <td>Удаление старых обоев</td>

            <td class="vertical">м<sup>2</sup></td>

            <td>

                    <input id="pos3_1" type="text" name="people" value="0">

            </td>

            <td class="vertical" id="pos3_1_price">50</td>

            <td id="pos3_1_count">0</td>

        </tr>

        

        <tr>

                <td>Очистка потолка от шпатлевки или краски</td>

            <td class="vertical">м<sup>2</sup></td>

            <td>

                    <input id="pos3_2" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos3_2_price">100</td>

            <td id="pos3_2_count">0</td>

        </tr>

        

        <tr>

                <td>Грунтование потолка</td>

            <td class="vertical">м<sup>2</sup></td>

            <td>

                    <input id="pos3_3" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos3_3_price">20</td>

            <td id="pos3_3_count">0</td>

        </tr>       

                

    </table>

 <div id="count_price3"><p>Итого: <span></span></p></div>

</form>



</div>





<div id="calculate4">



 <form method="post">

        <table id="tableSelect4" class="zebratable" width="100%" cellpadding="0" cellspacing="0">

            <tr>

            <th>Наименование работ</th>

            <th>Ед.изм.</th>

            <th>Колличество</th>

            <th>Цена за единицу</th>

            <th>Сумма</th>

        </tr>

        

        <tr>

                <td>Монтаж радиатора</td>

            <td class="vertical">шт</td>

            <td>

                    <input id="pos4_1" type="text" name="people" value="0">

            </td>

            <td class="vertical" id="pos4_1_price">2000</td>

            <td id="pos4_1_count">0</td>

        </tr>

        

        <tr>

                <td>Монтаж коллекторного шкафа</td>

            <td class="vertical">шт</td>

            <td>

                    <input id="pos4_2" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos4_2_price">1500</td>

            <td id="pos4_2_count">0</td>

        </tr>

        

        <tr>

                <td>Монтаж межэтажных стояков</td>

            <td class="vertical">мп</td>

            <td>

                    <input id="pos4_3" type="text" name="people_t" value="0">

            </td>

            <td class="vertical" id="pos4_3_price">200</td>

            <td id="pos4_3_count">0</td>

        </tr>       

                

    </table>

 <div id="count_price4"><p>Итого: <span></span></p></div>

</form>



</div>

JAVASCRIPT-КОД:

Код:



$(document).ready(function() {

        

        //Таблица1

        $("#tableSelect").change(function() {

                var totalSum = 0;

                

                $("input[id^='pos'], select[id^='pos']").each(function() {

                        var idElement = "#"+$(this).attr("id"), //Получаем id элемента

                                priceField = parseInt($(idElement+"_price").text()), //Стоимость позиции

                                countField = parseInt($(this).val()); //значение элемента

                        

                        $(idElement+"_count").text(priceField * countField); //Выводим сумму по позиции

                        totalSum += priceField * countField;

                });

                $("#count_price span").text(totalSum);

        });

        

        

        //Таблица2

        $("#tableSelect2").change(function() {

                var totalSum = 0;

                

                $("input[id^='pos2'], select[id^='pos2']").each(function() {

                        var idElement = "#"+$(this).attr("id"),

                                priceField = parseInt($(idElement+"_price").text()),

                                countField = parseInt($(this).val());

                        

                        $(idElement+"_count").text(priceField * countField);

                        totalSum += priceField * countField;

                });

                $("#count_price2 span").text(totalSum);

        });



                

        //Таблица3

        $("#tableSelect3").change(function() {

                var totalSum = 0;

                

                $("input[id^='pos3'], select[id^='pos3']").each(function() {

                        var idElement = "#"+$(this).attr("id"),

                                priceField = parseInt($(idElement+"_price").text()),

                                countField = parseInt($(this).val()); 

                        

                        $(idElement+"_count").text(priceField * countField); 

                        totalSum += priceField * countField;

                });

                $("#count_price3 span").text(totalSum);

        });

        

        

        //Таблица4

        $("#tableSelect4").change(function() {

                var totalSum = 0;

                

                $("input[id^='pos4'], select[id^='pos4']").each(function() {

                        var idElement = "#"+$(this).attr("id"),

                                priceField = parseInt($(idElement+"_price").text()),

                                countField = parseInt($(this).val());

                        

                        $(idElement+"_count").text(priceField * countField);

                        totalSum += priceField * countField;

                });

                $("#count_price4 span").text(totalSum);

        });

        



});

Вы можете записать значение в span, значит можете и получить его оттуда. Остается только просуммировать полученное

SkyLight,
Если бы я знал как это сделать, то не задавал бы вопрос на форуме. Спасибо)

Вы не знаете, как получить содержимое тега? Вы же это уже сделали. И уже записали результат одной операции в спан. Теперь вам нужно сделать по сути то же самое, что есть сейчас, просто с другими блоками.

SkyLight,
Здесь ни всё я делал сам. В JS я начинающий, так что прошу помощи.

Пользуясь вашим кодом:

var переменная = parseInt($(селектор).text())

Так вы берете значение из элемента, попутно приводя его к числу.

$(селектор).text(переменная);

Так вы записываете значение в элемент.

Работу с арифметикой не расписываю.

Итого: у вас есть все необходимое уже тут для решения задачи.

SkyLight,
Спасибо за разъяснение, буду пробовать.

В общем не разобрался. Так и не понял как правильно записать. Ничего не получилось. Спасибо.

А что хоть пробовали-то? Вы покажите

SkyLight,
Боюсь, это слишком глупо, чтобы показывать)

var sum = 0;
var totalSum1 = parseInt($(#"count_price span").text(totalSum);
var totalSum2 = parseInt($(#"count_price2 span").text(totalSum);
var totalSum3 = parseInt($(#"count_price3 span").text(totalSum);
var totalSum4 = parseInt($(#"count_price4 span").text(totalSum);

sum += totalSum1 + totalSum2 + totalSum3 + totalSum4;

Ну, вы почти угадали. Только в первых четырех выражениях totalSum из скобок уберите - если у text есть аргумент, то значение записывается, если нет - то получается. Ну и последняя строка: зачем вам там "+="?

totalSum из скобок убрал, "+" перед "=" убрал. И как вывести полученное значение "sum" в <span>?

$("#sum span").text(sum);

Как-то так?

Да, так. При этом, пересчет суммы надо делать при каждом пересчете ваших промежуточных сумм, т.е. всех тех функций выше.

SkyLight,

Я бы с удовольствием. Но не представляю как это сделать. Мучаюсь уже два дня с этой ерундой...

У вас пересчет промежуточных сумм происходит в обработчиках, повешенных на change. Теперь вам надо туда же добавить пересчет общей суммы.

SkyLight,
Ну это я понял, только как это сделать, я не знаю.:blink:

Вы уже написали кусок, который суммирует результаты. Теперь только надо добавить его во все обработчики на change'ах.

SkyLight,
Странно как-то получается. Я добавляю во все обработчики, в начало каждого, переменную sum, т.е.

var sum = 0;

После этого добавляю:

sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

в конец каждого обработчика. + ко всему я добавляю:

var sum = 0;
var totalSum1 = parseInt($(#"count_price span").text());
var totalSum2 = parseInt($(#"count_price2 span").text());
var totalSum3 = parseInt($(#"count_price3 span").text());
var totalSum4 = parseInt($(#"count_price4 span").text());

sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

$("#sum span").text(sum);

после всех 4 обработчиков?

Странная структура получается... Разве это логически правильно?

Цитата:

Сообщение от alshinkareff

Разве это логически правильно?

Правильнее будет повторяющиеся операции выносить в функцию и уже ее дергать.

В общем вообще всё перестало работать.:stop:

Код:



$(document).ready(function() {

        

        //Таблица1

        $("#tableSelect").change(function() {

                var totalSum = 0;

                var sum;

                

                $("input[id^='pos'], select[id^='pos']").each(function() {

                        var idElement = "#"+$(this).attr("id"), //Получаем id элемента

                                priceField = parseInt($(idElement+"_price").text()), //Стоимость позиции

                                countField = parseInt($(this).val()); //значение элемента

                        

                        $(idElement+"_count").text(priceField * countField); //Выводим сумму по позиции

                        totalSum += priceField * countField;

                });

                $("#count_price span").text(totalSum);

                sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

        });

        

        

        //Таблица2

        $("#tableSelect2").change(function() {

                var totalSum = 0;

                var sum;

                

                $("input[id^='pos2'], select[id^='pos2']").each(function() {

                        var idElement = "#"+$(this).attr("id"),

                                priceField = parseInt($(idElement+"_price").text()),

                                countField = parseInt($(this).val());

                        

                        $(idElement+"_count").text(priceField * countField);

                        totalSum += priceField * countField;

                });

                $("#count_price2 span").text(totalSum);

                sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

        });



                

        //Таблица3

        $("#tableSelect3").change(function() {

                var totalSum = 0;

                var sum;

                

                $("input[id^='pos3'], select[id^='pos3']").each(function() {

                        var idElement = "#"+$(this).attr("id"),

                                priceField = parseInt($(idElement+"_price").text()),

                                countField = parseInt($(this).val()); 

                        

                        $(idElement+"_count").text(priceField * countField); 

                        totalSum += priceField * countField;

                });

                $("#count_price3 span").text(totalSum);

                sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

        });

        

        

        //Таблица4

        $("#tableSelect4").change(function() {

                var totalSum = 0;

                var sum;

                

                $("input[id^='pos4'], select[id^='pos4']").each(function() {

                        var idElement = "#"+$(this).attr("id"),

                                priceField = parseInt($(idElement+"_price").text()),

                                countField = parseInt($(this).val());

                        

                        $(idElement+"_count").text(priceField * countField);

                        totalSum += priceField * countField;

                });

                $("#count_price4 span").text(totalSum);

                sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

        });

        

        var sum = 0;

        var totalSum1 = parseInt($(#"count_price span").text());

        var totalSum2 = parseInt($(#"count_price2 span").text());

        var totalSum3 = parseInt($(#"count_price3 span").text());

        var totalSum4 = parseInt($(#"count_price4 span").text());



        sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

        

        $("#sum span").text(sum); 

        

});

Ну и к HTML добавлен <div id="sum">ОБЩЕЕ ИТОГО<span></span></div>

Цитата:

Сообщение от alshinkareff

var sum = 0;
var totalSum1 = parseInt($(#"count_price span").text());
var totalSum2 = parseInt($(#"count_price2 span").text());
var totalSum3 = parseInt($(#"count_price3 span").text());
var totalSum4 = parseInt($(#"count_price4 span").text());

sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

$("#sum span").text(sum);

В вашем случае вот этот блок должен вызываться при пересчете. Одного только

sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

недостаточно.

SkyLight,
Что я должен сделать - не понятно. Уж такой я нуб в JS.

Значения группы переменных totalSum1..totalSum4 обновляйте

Как это сделать? Люди. Я спрашиваю: "как сделать?", получаю в ответ "тебе надо сделать это...", я понял что мне много чего надо сделать, но я спрашиваю как? Спасибо за Ваши отклики, всё же, надеюсь на понимание.

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

sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

это:

var sum = 0;
var totalSum1 = parseInt($(#"count_price span").text());
var totalSum2 = parseInt($(#"count_price2 span").text());
var totalSum3 = parseInt($(#"count_price3 span").text());
var totalSum4 = parseInt($(#"count_price4 span").text());

sum = totalSum1 + totalSum2 + totalSum3 + totalSum4;

$("#sum span").text(sum);

Только предварительно исправьте в этом куске ошибки - вы же решетку за кавычки вынесли зачем-то.

Кстати, общий вопрос: а раз вы толком не знаете JS, то зачем взялись за такую задачу? Да еще и с jQuery. Не с этого начинать надо... У вас же в итоге только каша получится. С простого надо было начать.