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

[DaLamaro]

Здравствуйте . Есть 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);
	});


});

[wwt]

каждому span задаете id предположим span1,span2,span3,span4

потом забираете значения из каждого span как то так для примера:

var a = 0;
for(var i = 1;i <= 4 ; i++){
	 a += parseInt($("#span"+i).text(), 10);
}
$("#out").text(a);

Edited April 14, 2013 by wwt

[sitemaker999]

wwt, Я вас тут заметил.

Я там в своей теме еще вопрос написал.

Edited April 14, 2013 by sitemaker999

[DaLamaro]

каждому span задаете id предположим span1,span2,span3,span4

потом забираете значения из каждого span как то так для примера:

var a = 0;
for(var i = 1;i <= 4 ; i++){
	 a += parseInt($("#span"+i).text(), 10);
}
$("#out").text(a);

Спасибо за Ваш отклик и немаловажную помощь)

А можно сделать так, что бы не задавать id всем предыдущим span'ам, т.е. оставить предыдущий скрипт без изменений. У меня, в принципе, меняется id div'ов "count_price" соответственно для всех таблиц, "#count_price", "#count_price2", "#count_price3", "#count_price4", а span'ы, в каждом таком div'е, без id. Надеюсь Вы поняли моё замудрённое описание) Заранее благодарен)