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

alshinkareff 13.04.2013 20:22

Общий подсчёт из нескольких полей
 
Здравствуйте: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);
        });
       

});


SkyLight 13.04.2013 20:33

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

alshinkareff 13.04.2013 20:35

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

SkyLight 13.04.2013 20:47

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

alshinkareff 13.04.2013 20:53

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

SkyLight 13.04.2013 21:48

Пользуясь вашим кодом:
var переменная = parseInt($(селектор).text())

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

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

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

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

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

alshinkareff 13.04.2013 21:51

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

alshinkareff 13.04.2013 22:19

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

SkyLight 13.04.2013 23:09

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

alshinkareff 13.04.2013 23:26

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;


Часовой пояс GMT +3, время: 19:46.