Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2013, 18:44
Новичок на форуме
Отправить личное сообщение для mindnomind Посмотреть профиль Найти все сообщения от mindnomind
 
Регистрация: 21.07.2013
Сообщений: 7

Счётчик стоимости - необходимо мнение экспертов
Друзья, добрый день. В программировании не силен, но постепенно хочу всему научиться. Написал свой первый js-скрипт - всё работает, но я более чем уверен, что сделано громоздко и не по-человечески. Заинтересован именно в обучении, а не прошу написать код за меня. Буду рад услышать ваши замечания и советы. Заранее большое спасибо!
Итак. Использую 2 таблицы в БД:
- в 1-й лежат: id типовой работы, её название и цена, id типа работы
- во 2-й: id типа работы и название типа работы

Нужно всё представить в виде калькулятора. Примерный вид представлен в изображении.



Собственно Кол-во пользователь прописывает через инпуты самостоятельно. Без перезагрузки страницы выводятся аутпуты: индивидуальная сумма для каждой работы, промежуточный итог по каждому типу работ, общая конечная сумма.

Ниже представлен код (т.к. использовалась джумла, то присутствует характерный код в работе с БД):

Код:
$db = JFactory::getDbo();

//DB #_usl
$query = $db->getQuery(true);
$query->select(array('id','name','price','id_r'));
$query->from('#__usl');
$db->setQuery($query);
$result= $db->loadAssocList();
//DB #_usl_r
$query = $db->getQuery(true);
$query->select(array('id','name'));
$query->from('#__usl_r');
$db->setQuery($query);
$result_r= $db->loadAssocList();

?>
<form onsubmit="return false;" oninput="changeText0()">
 <table border ='1' id='tablecalc'>
	<tr><strong>
				<td>Наименование</td>
	                        <td>Цена</td>
				<td>Количество</td>
				<td>Сумма</td>
	</strong></tr>
	
<?php 
    $i = 0;
    while ($i < count($result_r))
        { ?>
	<tr id="trmain">
		<td colspan="4"><?php echo $result_r[$i]["name"]?></td>
	</tr>
		<?php  $ii = 0;$x = 0;
		       while ($ii < count($result)) 
		{
		 if ($result[$ii]['id_r'] == $result_r[$i]['id'])
			{?>
<tr  id="trmain<?php echo $result_r[$i]["id"] ?>">
<td class="tdname" ><?php echo $result[$ii]["name"]?></td>
<td class="tdprice" price='
<?php echo $result[$ii]["price"] ?>'>
<?php echo $result[$ii]["price"]?> руб.</td>
<td><input type='text'></td>
<td><output id='tot<?php echo "$i-$x" ?>'>0 руб.</output></td>
						</tr>		  		  
				<?php 
				    $x++;}
			$ii++;} ?>
	<tr id="trmain">
		<td>Итого:</td><td colspan="3">
<output class="stot" id="stot<?php echo $i ?>">0 руб.</output>
</td>
	</tr>
		<?php $i++;} ?>
		
 </table>  
 <output id="supertotal">0 руб.</output>
</form>

<script>
function changeText0(){
 var supertotal = 0;
 var total = 0;
 var prices = [];
 var vals = [];
 var totals = [];
 var stotalsid= [];
 var stotals= 0;
   $('.stot').each(function(){
		stotalsid.push (Number($(this).attr("id")));				
    });
for (var i=0; i<stotalsid.length; i++)
{	 
$('#trmain'+ i +' .tdprice').each(function(){
prices.push (Number($(this).attr("price")));				
});			
$('#trmain'+ i +' input').each(function(){
vals.push (Number($(this).val()));				
});
for (var ii=0; ii<vals.length; ii++)
{
totals[ii] = vals[ii]*prices[ii];
$('#tot' +i +'-'+ ii).html( totals[ii] + ' руб.' );
stotals += totals[ii];				 
}
supertotal += stotals;
$('#stot'+ i).html( stotals + ' руб.' );	
stotals= 0;
prices = [];
  vals = [];
totals=[];            		
		}
	$('#supertotal').html( supertotal + ' руб.' );	
};
</script>

Последний раз редактировалось mindnomind, 22.07.2013 в 10:55.
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2013, 10:52
Новичок на форуме
Отправить личное сообщение для mindnomind Посмотреть профиль Найти все сообщения от mindnomind
 
Регистрация: 21.07.2013
Сообщений: 7

-10 в карму....спасибо, очень дружелюбная атмосфера...
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2013, 11:00
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

вот только я не пойму, причем здесь пхп? форум js программистов... нажмите ctrl + u и получите сгенерированную страницу
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2013, 11:11
Новичок на форуме
Отправить личное сообщение для mindnomind Посмотреть профиль Найти все сообщения от mindnomind
 
Регистрация: 21.07.2013
Сообщений: 7

но основная же суть моего вопроса как раз-таки в js... php используется как средство выкачки информации из БД. я более чем уверен, что опытный js-разработчик владеет php

<script>
function changeText0(){
 var supertotal = 0;
 var total = 0;
 var prices = [];
 var vals = [];
 var totals = [];
 var stotalsid= [];
 var stotals= 0;
   $('.stot').each(function(){
		stotalsid.push (Number($(this).attr("id")));				
    });
for (var i=0; i<stotalsid.length; i++)
{	 
$('#trmain'+ i +' .tdprice').each(function(){
prices.push (Number($(this).attr("price")));				
});			
$('#trmain'+ i +' input').each(function(){
vals.push (Number($(this).val()));				
});
for (var ii=0; ii<vals.length; ii++)
{
totals[ii] = vals[ii]*prices[ii];
$('#tot' +i +'-'+ ii).html( totals[ii] + ' руб.' );
stotals += totals[ii];				 
}
supertotal += stotals;
$('#stot'+ i).html( stotals + ' руб.' );	
stotals= 0;
prices = [];
  vals = [];
totals=[];            		
		}
	$('#supertotal').html( supertotal + ' руб.' );	
};
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2013, 11:18
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

я так понимаю, вы хотите оптимизировать свой код? вот вы сейчас мне дали js, а html где? вот, например, это: $('#stot'+ i) - что за id такой, откуда он берется.. я не экстрасенс.. выложите полностью свой html код (!!сгенерированный!!)
Ответить с цитированием
  #6 (permalink)  
Старый 22.07.2013, 11:40
Новичок на форуме
Отправить личное сообщение для mindnomind Посмотреть профиль Найти все сообщения от mindnomind
 
Регистрация: 21.07.2013
Сообщений: 7

Вас понял. Выкладываю код. В каждом типе работ оставил по 2 наименования, дабы не выкладывать огромную простыню кода... Количество наименований в каждом типе работ соответственно может быть разным.

<div id="calculator" class="span4"><!-- START: Modules Anywhere -->
	
<form onsubmit="return false;" oninput="changeText0()">
 <table border ='1' id='tablecalc' class="table table-bordered">
   <thead>
	<tr>
				<th>Наименование</th>
	            <th>Цена</th>
				<th>Количество</th>
				<th>Сумма</th>
	</tr>
	</thead>
	<tr id="trmain">
		<td colspan="4">Работы по установке домофонов</td>
	</tr>
								<tr  id="trmain0">
							<td class="tdname" >Монтаж и подключение накладной вызывной панели</td>
							<td class="tdprice" price='1500'>1500 руб.</td>
							<td><input type='text'></td>
							<td><output id='tot0-0'>0 руб.</output></td>
						</tr>		  		  
										<tr  id="trmain0">
							<td class="tdname" >Монтаж и подключение накладной вызывной панели</td>
							<td class="tdprice" price='1500'>1500 руб.</td>
							<td><input type='text'></td>
							<td><output id='tot0-1'>0 руб.</output></td>
						</tr>		  		  
											  		  
					<tr id="trmain">
		<td>Итого:</td><td colspan="3"><output class="stot" id="stot0">0 руб.</output></td>
	</tr>
			<tr id="trmain">
		<td colspan="4">Пуско-наладочные работы при установке домофонов</td>
	</tr>
								<tr  id="trmain1">
							<td class="tdname" >Программирование ключа для домофона</td>
							<td class="tdprice" price='25'>25 руб.</td>
							<td><input type='text'></td>
							<td><output id='tot1-0'>0 руб.</output></td>
						</tr>		  		  
										<tr  id="trmain1">
							<td class="tdname" >Настройка функциональной группы до 3 органов</td>
							<td class="tdprice" price='7500'>7500 руб.</td>
							<td><input type='text'></td>
							<td><output id='tot1-1'>0 руб.</output></td>
						</tr>		  		  
											  		  
					<tr id="trmain">
		<td>Итого:</td><td colspan="3"><output class="stot" id="stot1">0 руб.</output></td>
	</tr>
			<tr id="trmain">
		<td colspan="4">Слаботочные работы при установке домофона</td>
	</tr>
								<tr  id="trmain2">
							<td class="tdname" >Монтаж пластиковой коробки на кабеле</td>
							<td class="tdprice" price='1100'>1100 руб.</td>
							<td><input type='text'></td>
							<td><output id='tot2-0'>0 руб.</output></td>
						</tr>		  		  
										<tr  id="trmain2">
							<td class="tdname" >Монтаж пластикового короба (1 м)</td>
							<td class="tdprice" price='25'>25 руб.</td>
							<td><input type='text'></td>
							<td><output id='tot2-1'>0 руб.</output></td>
						</tr>												  		  
					<tr id="trmain">
		<td>Итого:</td><td colspan="3"><output class="stot" id="stot2">0 руб.</output></td>
	</tr>
				
 </table>  
 <output id="supertotal">0 руб.</output>
</form>

<script>
function changeText0(){
 var supertotal = 0;
 var total = 0;
 var prices = [];
 var vals = [];
 var totals = [];
 var stotalsid= [];
 var stotals= 0;
   $('.stot').each(function(){
		stotalsid.push (Number($(this).attr("id")));				
    });
	for (var i=0; i<stotalsid.length; i++)
		{
		    $('#trmain'+ i +' .tdprice').each(function(){
			prices.push (Number($(this).attr("price")));				
			});			
			$('#trmain'+ i +' input').each(function(){
			vals.push (Number($(this).val()));				
			});
			for (var ii=0; ii<vals.length; ii++)
				{
				 totals[ii] = vals[ii]*prices[ii];
				 $('#tot' +i +'-'+ ii).html( totals[ii] + ' руб.' );
				 stotals += totals[ii];				 
				}
			supertotal += stotals;
			$('#stot'+ i).html( stotals + ' руб.' );	
		    stotals= 0;
			prices = [];
            vals = [];
			totals=[];            		
		}
	$('#supertotal').html( supertotal + ' руб.' );	
};
</script>


<!-- END: Modules Anywhere --></div>
Ответить с цитированием
  #7 (permalink)  
Старый 22.07.2013, 11:55
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

Цитата:
Написал свой первый js-скрипт
он ну никак, ну совсем никак неинтересен никому на этой планете, кроме нескольких хакеров -- но хакерам больше интересен php
Цитата:
хочу всему научиться
похвально, но на форуме не учат, а скорее ищут ошибки, и не потенциальные, а реальные
книжки и мануалы в 100 раз полезнее
Цитата:
но я более чем уверен, что сделано громоздко и не по-человечески
в контексте джумлы это изначальная ошибка
тем, кто выбирает джумлу, надо делать по 4 сайта в день
им некогда наводить красоту
и другие джумловоды не будут уважать
Ответить с цитированием
  #8 (permalink)  
Старый 22.07.2013, 12:08
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
	<table border="1">
		<tr>
			<td width="200">работы</td>
			<td width="100">цена</td>
			<td width="100">кол-во</td>
			<td width="150">сумма</td>
		</tr>
		<tr>
			<td colspan="4" style="text-align: center;">тип 1</td>
		</tr>
		<tr>
			<td width="200">Наименование ...</td>
			<td width="100">1000 руб</td>
			<td width="100" onclick="edit(this);">0</td>
			<td width="150" class="group1">0</td>
		</tr>
		<tr>
			<td width="200">Наименование ...</td>
			<td width="100">1000 руб</td>
			<td width="100" onclick="edit(this);">0</td>
			<td width="150" class="group1">0</td>
		</tr>
		<tr>
			<td colspan="3">Итого</td>
			<td class="group1_total">0</td>
		</tr>
		<tr>
			<td colspan="4" style="text-align: center;">тип 2</td>
		</tr>
		<tr>
			<td width="200">Наименование ...</td>
			<td width="100">1000 руб</td>
			<td width="100" onclick="edit(this);">0</td>
			<td width="150" class="group2">0</td>
		</tr>
		<tr>
			<td width="200">Наименование ...</td>
			<td width="100">1000 руб</td>
			<td width="100" onclick="edit(this);">0</td>
			<td width="150" class="group2">0</td>
		</tr>
		<tr>
			<td colspan="3" class="group2_total">Итого</td>
			<td>0</td>
		</tr>
	</table>
	<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
	function edit(ths)
		{
		$(ths).attr('onclick', '');
		$(ths).html('<input class="edit" type="text" value="' + $(ths).html() + '">');
		var edit = $('.edit');
		$(edit).focus();
		$(edit).on('blur', blurElit);
		}
	
	function blurElit()
		{
		var parent = $(this).parent();
		var value = $(this).val();
		var prev_val = parseInt($(parent).prev().html());
		
		$(parent).html(value);
		$(parent).attr('onclick', 'edit(this)');
		
		
		$(parent).next().html((prev_val * value) + ' руб');
		
		var clas = $(parent).next().attr('class');
		
		var total = 0;
		$('.' + clas).each(function(ind, val)
			{
			total += parseInt($(val).html());
			});
		
		$('.' + clas + '_total').html(total + ' руб');
		}
    </script>
  </body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 22.07.2013, 12:09
Новичок на форуме
Отправить личное сообщение для mindnomind Посмотреть профиль Найти все сообщения от mindnomind
 
Регистрация: 21.07.2013
Сообщений: 7

mta88
Москва не сразу строилась. Спасибо за советы.
Ответить с цитированием
  #10 (permalink)  
Старый 22.07.2013, 12:12
Новичок на форуме
Отправить личное сообщение для mindnomind Посмотреть профиль Найти все сообщения от mindnomind
 
Регистрация: 21.07.2013
Сообщений: 7

skrudjmakdak,
спасибо добрый человек! буду разбираться...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск