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

[alshinkareff]

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


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]

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

[alshinkareff]

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

[SkyLight]

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

[alshinkareff]

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

[SkyLight]

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

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

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

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

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

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

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

[alshinkareff]

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

[alshinkareff]

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

[SkyLight]

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

[alshinkareff]

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;