Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2013, 07:45
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

динамическое добавление и редактирование полей Jquery
Приветствую всех! Помогите советом примером или инфой не могу разобраться в след коде

<body>
<div id="main">
<p><button id="add">Добавить строчку</button></p>
	<div id="strSchet">
		<p id="first">Сумма, р.</p>
		<div id="counts">
		</div>
	</div>
</div>
</body>

$(document).ready(function() {
	$('#add').click(function(){
		$('#counts').prepend('<p><input type="text" id="edit" /><button id="save">Сохранить</button></p>');
		$('#edit').focus();
		$('#save').click(function()	{
			var val = $('#edit').val();	
			$('#edit').parent().empty().html(val);
			});
	});
	
		$('#counts').on('click','p', function(e){
		var t = e.target || e.srcElement;
		
		var elm_name = t.tagName.toLowerCase();
		if(elm_name == 'input' )	{return false;}

		var val=$(this).html();
		var code = '<input type="text" id="edit" value="'+val+'" /><button id="save">Сохранить</button>';
		$(this).empty().append(code);

		$('#edit').focus();
			$('#save').click(function()	{	
				var val = $('#edit').val();	
				$('#edit').parent().empty().html(val);
			});
			
		});
});


Проблема вот в чем! Поле добавляется все хорошо ввожу значение жму сохранить все ок! Но когда я начинаю редактировать поле обработчик отслеживает нажатие на P и соответственно при нажатии на тот же самый p который редактируется вылазят глюки. Как сделать так что бы не реагировал на нажатие активного p??
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2013, 10:27
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div id="main">
<p><button id="add">Добавить строчку</button></p>
	<div id="strSchet">
		<p id="first">Сумма, р.</p>
		<div id="counts">
		</div>
	</div>
</div>
<script>
$(document).ready(function() {
	$('#add').click(function(){
		$('#counts').prepend('<p><input type="text" id="edit" /><button id="save">Сохранить</button></p>');
		$('#edit').focus();
		$('#save').click(function()	{
			var val = $('#edit').val();	
			$('#edit').parent().empty().html(val);
			});
	});
	
		$('#counts').on('click','p', function(e){
		  var t = e.target || e.srcElement;
		
		  var elm_name = t.tagName.toLowerCase();
		  if(elm_name == 'p' && $(t).find('input').length != 0 )	{return false;}
                  if (elm_name == 'input') {$(t).focus(); return false;}

		  var val=$(this).html();
		  var code = '<input type="text" id="edit" value="'+val+'" /><button id="save">Сохранить</button>';
		  $(this).empty().append(code);

		  $('#edit').focus();
			$('#save').click(function()	{	
				var val = $('#edit').val();	
				$('#edit').parent().empty().html(val);
			});
			
		});
});

</script>
</body>


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

Последний раз редактировалось tsigel, 03.09.2013 в 10:41.
Ответить с цитированием
  #3 (permalink)  
Старый 03.09.2013, 11:58
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div id="main">
<p><button id="add">Добавить строчку</button></p>
	<div id="strSchet">
		<p id="first">Сумма, р.</p>
		<div id="counts">
		</div>
	</div>
</div>
<script>
$(document).ready(function() {
	var i = $('input').size(); //счетчик INPUTS	
	//обработчик клика по кнопке Добавить строчку
		$('#add').click(function(){
		if(i<1){
			//добавляем INPUT 
			$('#counts').prepend('<p><span id="ed"><input type="text" id="edit" /><button id="save">Сохранить</button></span></p>');
			//ставим фокус на добавленный INPUT
			$('#edit').focus();
			//ограничение на ввод только цифр
			$('#edit').keydown(function (event){
			if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27) 
					{return;} 
			else {
            // убеждаемся, что это цифра, и останавливаем событие keypress
				if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) 
					{ event.preventDefault(); }
			}
			});
		i++;//добавляем +1 INPUT
		$('#save').click(function()	{	//обработчик клика по кнопке Сохранить
				//сохраняем значение из INPUT в переменную 
				var val = $('#edit').val();	
				/*var val_itog = $('#itog').text();//получаем то, что в поле находится*/
				//находим строчку, опустошаем, вставляем значение из поля
				$('#edit').parent().empty().html(val);
				/*$('#itog').text()*/
		i--;//Убираем INPUT
			});
		
			}
	});
	
		$('#counts').on('click','#ed', function(e){
		//ловим элемент, по которому кликнули
		var t = e.target || e.srcElement;
		//получаем название тега
		var elm_name = t.tagName.toLowerCase();
		//если это инпут - ничего не делаем
		if(elm_name == 'input' ){return false;}
		//получаем значение из span блока
		var val=$(this).html();
		//формируем код INPUT
		var code = '<input type="text" id="edit" value="'+val+'" /><button id="save">Сохранить</button>';
		$(this).empty().append(code);
		//устанавливаем фокус на поле
		$('#edit').focus();
			$('#save').click(function()	{	//обработчик клика по кнопке Сохранить
				var val = $('#edit').val();	//получаем то, что в поле находится
				//находим строку, опустошаем, вставляем значение из поля
				$('#edit').parent().empty().html(val);
			});
			
		});
});

</script>
</body>



Сделал немного по другому уже сам.. спасибо за ответ! приму к сведенью.. думаю как щас ограничить редактирование .. т.е. что в режиме редактирования была только одна строка ??
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2013, 12:11
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Используйте флаг.
var flag = true;
function editShow () {
  if (flag) {
    flag = false;
  } else {
    return false;
  }
}
Ответить с цитированием
  #5 (permalink)  
Старый 04.09.2013, 13:41
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

Все получилось !! отлично ! остался еще одна делать.. с помощью каких методов сделать след.
Когда область с данными добавленными по кнопке Добавить строку переполняется и появляется скролл то строку Итог нужно приклеить к нижнему края экрана! Приклеить когда скрол я сделал так
$(window).scroll(function()
				{$('#forItog').css({'border':'1px solid #000000','position':'fixed','bottom':'0px','left':'15px'});
				});



Нужно убрать position и сделать как раньше когда скрол доходит до низа страницы
Ответить с цитированием
  #6 (permalink)  
Старый 05.09.2013, 08:11
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Приведите пример. Я у вас вообще не вижу "Итог".
Ответить с цитированием
  #7 (permalink)  
Старый 05.09.2013, 12:06
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div id="main">
<p><button id="add">Добавить строчку</button></p>
	<div id="strSchet">
	<div id="scrol"></div> 
		<p id="title">Сумма, р.</p>
		<div id="counts">
		</div>
	</div>
	<div id="forItog">Итого: <span id="itog"></span></div>
</div>


<script>
$(document).ready(function() {
		
		$(window).scroll(function()
				{
				var divHeight = $(window).innerHeight();
				var innerHeight = $('body').innerHeight();
				var Top = $(window).scrollTop();
				var now =innerHeight-divHeight-Top+28;
				$('#scrol').html(innerHeight + "  " +divHeight +" "+now);
				if(now>0)
				{
				
				$('#forItog').addClass('forItog');
				}else{$('#forItog').removeClass('forItog');}
				});
	var i = $('input').size(); //счетчик INPUTS	
	//обработчик клика по кнопке Добавить строчку
		$('#add').click(function(){
		if(i<1){
			//добавляем INPUT 
			$('#counts').prepend('<p><input type="text" id="edit" /><button id="save">Сохранить</button></p>');
			//ставим фокус на добавленный INPUT
			$('#edit').focus();
			//ограничение на ввод только цифр
			$('#edit').keydown(function (event){
			if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27) 
					{return;} 
			else {
            // убеждаемся, что это цифра, и останавливаем событие keypress
				if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) 
					{ event.preventDefault(); }
			}
			});
		i++;//добавляем +1 INPUT
		
		
		$('#edit').keydown(function(event){    
    if(event.keyCode==13){
       $('#save').trigger('click');
	   }
    });

		$('#save').click(function()	{	//обработчик клика по кнопке Сохранить
				//сохраняем значение из INPUT в переменную 
				var val = $('#edit').val();	
				/*var val_itog = $('#itog').text();//получаем то, что в поле находится*/
				//находим строчку, опустошаем, вставляем значение из поля
				$('#edit').parent().empty().html(val);
				/*$('#itog').text()*/
		i--;//Убираем INPUT
				var summa =0;
				$('#counts p').each(function(){
					summa +=parseInt($(this).text());
				$('#itog').text(summa);
			
		
				});
			});
		
			}
			
		
	});
		
		$('#counts').on('click','p', function(e){
		if(i<1){
		//ловим элемент, по которому кликнули
		var t = e.target || e.srcElement;
		//получаем название тега
		var elm_name = t.tagName.toLowerCase();
		//если это инпут или редактируемая строка  - ничего не делаем
		if(elm_name == 'p' && $(t).find('input').length != 0 )    {return false;}
		if(elm_name == 'input' ){return false;}
		//получаем значение из span блока
		var val=$(this).html();
		//формируем код INPUT
		
		flag=false;
		var code = '<input type="text" id="edit" value="'+val+'" /><button id="save">Сохранить</button>';
		$(this).empty().append(code);
		//устанавливаем фокус на поле
		$('#edit').focus();
		i++;
		
			$('#edit').keydown(function(event){    
    if(event.keyCode==13){
       $('#save').trigger('click');
	   }
    });

		
			$('#save').click(function()	{	//обработчик клика по кнопке Сохранить
				var val = $('#edit').val();	//получаем то, что в поле находится
				//находим строку, опустошаем, вставляем значение из поля
				$('#edit').parent().empty().html(val);
				i--;
				
				var summa =0;
				$('#counts p').each(function(){
					summa +=parseInt($(this).text());
				$('#itog').text(summa);
				});
			});
			}
		});
		

});
</script>
</body>



Уже незнаю как быть.. осталось сделать след.. Когда появляется скрол то Итог прилепает к нижнему краю.. когда скрол доходит до низа Итог должен вставать обратно на место! а у меня начинаются глюки какие то
Ответить с цитированием
  #8 (permalink)  
Старый 05.09.2013, 12:07
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

$('input').keydown(function (e) {
  if (e.keyCode == 13) 
    $('сохранить').click()
});
Ответить с цитированием
  #9 (permalink)  
Старый 05.09.2013, 12:09
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

Сообщение от tsigel Посмотреть сообщение
$('input').keydown(function (e) {
  if (e.keyCode == 13) 
    $('сохранить').click()
});
спасибо это сделал... последний шаг остался )
Ответить с цитированием
  #10 (permalink)  
Старый 05.09.2013, 12:13
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
#counts {
  max-height: 100px;
  overflow-y: auto;
}
</style>
<div id="main">
<p><button id="add">Добавить строчку</button></p>
	<div id="strSchet">
	<div id="scrol"></div> 
		<p id="title">Сумма, р.</p>
		<div id="counts">
		</div>
	</div>
	<div id="forItog">Итого: <span id="itog"></span></div>
</div>


<script>
$(document).ready(function() {
		
		$(window).scroll(function()
				{
				var divHeight = $(window).innerHeight();
				var innerHeight = $('body').innerHeight();
				var Top = $(window).scrollTop();
				var now =innerHeight-divHeight-Top+28;
				$('#scrol').html(innerHeight + "  " +divHeight +" "+now);
				if(now>0)
				{
				
				$('#forItog').addClass('forItog');
				}else{$('#forItog').removeClass('forItog');}
				});
	var i = $('input').size(); //счетчик INPUTS	
	//обработчик клика по кнопке Добавить строчку
		$('#add').click(function(){
		if(i<1){
			//добавляем INPUT 
			$('#counts').prepend('<p><input type="text" id="edit" /><button id="save">Сохранить</button></p>');
			//ставим фокус на добавленный INPUT
			$('#edit').focus();
			//ограничение на ввод только цифр
			$('#edit').keydown(function (event){
			if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27) 
					{return;} 
			else {
            // убеждаемся, что это цифра, и останавливаем событие keypress
				if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) 
					{ event.preventDefault(); }
			}
			});
		i++;//добавляем +1 INPUT
		
		
		$('#edit').keydown(function(event){    
    if(event.keyCode==13){
       $('#save').trigger('click');
	   }
    });

		$('#save').click(function()	{	//обработчик клика по кнопке Сохранить
				//сохраняем значение из INPUT в переменную 
				var val = $('#edit').val();	
				/*var val_itog = $('#itog').text();//получаем то, что в поле находится*/
				//находим строчку, опустошаем, вставляем значение из поля
				$('#edit').parent().empty().html(val);
				/*$('#itog').text()*/
		i--;//Убираем INPUT
				var summa =0;
				$('#counts p').each(function(){
					summa +=parseInt($(this).text());
				$('#itog').text(summa);
			
		
				});
			});
		
			}
			
		
	});
		
		$('#counts').on('click','p', function(e){
		if(i<1){
		//ловим элемент, по которому кликнули
		var t = e.target || e.srcElement;
		//получаем название тега
		var elm_name = t.tagName.toLowerCase();
		//если это инпут или редактируемая строка  - ничего не делаем
		if(elm_name == 'p' && $(t).find('input').length != 0 )    {return false;}
		if(elm_name == 'input' ){return false;}
		//получаем значение из span блока
		var val=$(this).html();
		//формируем код INPUT
		
		flag=false;
		var code = '<input type="text" id="edit" value="'+val+'" /><button id="save">Сохранить</button>';
		$(this).empty().append(code);
		//устанавливаем фокус на поле
		$('#edit').focus();
		i++;
		
			$('#edit').keydown(function(event){    
    if(event.keyCode==13){
       $('#save').trigger('click');
	   }
    });

		
			$('#save').click(function()	{	//обработчик клика по кнопке Сохранить
				var val = $('#edit').val();	//получаем то, что в поле находится
				//находим строку, опустошаем, вставляем значение из поля
				$('#edit').parent().empty().html(val);
				i--;
				
				var summa =0;
				$('#counts p').each(function(){
					summa +=parseInt($(this).text());
				$('#itog').text(summa);
				});
			});
			}
		});
		

});
</script>
</body>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление из нескольких полей в одно bohdantheone Общие вопросы Javascript 12 08.10.2013 12:32
Динамическое добавление и удаление одной и тойже вкладки в Ext.tab.Panel potkin ExtJS 2 29.07.2012 15:47
Jquery редактирование блока анкеты kodiua jQuery 0 22.02.2010 12:52
Добавление и удаление полей в форму anoth3r Events/DOM/Window 1 11.09.2009 14:10