Javascript.RU

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

Удаление и редактирование динамических Input
Выкладываю полный код! Помогите срочно нужно закончить! проблемы которые пока не могу решить:
1. При наведении на запись появляется span блок Удалить. когда я хочу редактировать запись текст этого span блока тоже попадает в INPUT
2. Как сделать форматирование чисел что бы разделял тысячи пробелом образец ( 10000- обычное 10 000- разделение0
3. Скроллинг При добавлении слишком большого количества строк должен появляется скрол общий (окна) и когда происходит событие скрол Итог прилипает к нижней кромке НО когда скрол заканчивается он сново уходит вниз!


<body>

<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(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"  size="5"/><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();	
			
				if(val.length==0){ val=0;}
				/*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;}
		if(elm_name == 'span' ){$(this).remove();return false;}
		//получаем значение из  блока
		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);
				});
			});
			}
			
		});
		
		
	
		
	$('#counts').on('mouseenter','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 == 'button' ){return false;}
		if(elm_name == 'input' ){return false;}
	$(this).addClass('blue');
	var code = '<span id="delete">Удалить</span>';
	$(this).append(code);
	
	
	});
	
	$('#counts').on('mouseleave','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 == 'button' ){return false;}
		if(elm_name == 'input' ){return false;}
		if(elm_name == 'href' ){return false;}
	
	$(this).removeClass('blue');
	$('#delete').remove();

	});

});
</script>
</body>
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2013, 15:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от nikolaymac
1. При наведении на запись появляется span блок Удалить. когда я хочу редактировать запись текст этого span блока тоже попадает в INPUT
Как понять при наведении твои намерения? Что ты собрался делать? Редактировать или удалять?
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2013, 15:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от nikolaymac
2. Как сделать форматирование чисел что бы разделял тысячи пробелом образец ( 10000- обычное 10 000- разделение
Ну тут масса примеров!
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2013, 17:12
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

Сообщение от ksa Посмотреть сообщение
Как понять при наведении твои намерения? Что ты собрался делать? Редактировать или удалять?
суть такая.. Наводим мышь на строку - появляется две возможности!
1. нажать на строку и появится инпут с содержнием (тоесть редактирование)
2. Нажать на появившуюся псевдосылку Удалить
Ответить с цитированием
  #5 (permalink)  
Старый 09.09.2013, 19:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от nikolaymac
1. нажать на строку и появится инпут с содержнием (тоесть редактирование)
2. Нажать на появившуюся псевдосылку Удалить
А "псевдо ссылка" типа не в строке?

Опять привычное направление...
http://javascript.ru/tutorial/events...vaniya-sobytiy
Ответить с цитированием
  #6 (permalink)  
Старый 10.09.2013, 06:35
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

Сообщение от ksa Посмотреть сообщение
А "псевдо ссылка" типа не в строке?

Опять привычное направление...
http://javascript.ru/tutorial/events...vaniya-sobytiy
Вот именно что в строке ! и его код добавляется в инпут.. как избавится от этого ?
Ответить с цитированием
  #7 (permalink)  
Старый 10.09.2013, 10:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от nikolaymac
его код добавляется в инпут..
Вот это вообще непонятно... Как это код можно добавить в инпут?

Сообщение от nikolaymac
как избавится от этого ?
Я же дал ссылку выше... Смотри на каком именно элементе клацнули и делай соответствующие выводы.

Если непонятно - делай ХТМЛ пример - на нем могут показать...
Ответить с цитированием
  #8 (permalink)  
Старый 10.09.2013, 11:04
Аспирант
Отправить личное сообщение для nikolaymac Посмотреть профиль Найти все сообщения от nikolaymac
 
Регистрация: 26.06.2013
Сообщений: 33

По порядку.. click событие срабатывает по нажатию на ЛЮБОЙ абзац в div блоке counts
После клика берется значение из абзаца <p> и создается INPUT где value - это значение из абзаца заносится
Вот тут и трабл!)) У меня в абзаце при наведении появляется span блок с кнопкой удалить... и соответственно этот блок тоже попадает в value ! в INPUT


$('#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;}
		if(elm_name == 'span' ){$(this).remove();return false;}
		//получаем значение из  блока
		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);
				});
			});
			}
			
		});
		
		
	
		
	$('#counts').on('mouseenter','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 == 'button' ){return false;}
		if(elm_name == 'input' ){return false;}
	$(this).addClass('blue');
	var code = '<span id="delete">Удалить</span>';
	$(this).append(code);
	
	
	});
Ответить с цитированием
  #9 (permalink)  
Старый 10.09.2013, 11:42
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от nikolaymac
У меня в абзаце при наведении появляется span блок с кнопкой удалить... и соответственно этот блок тоже попадает в value ! в INPUT
Не понимаю, что мешает вам в абзаце сделать
<span> здесь текст</span> здесь кнопка

и брать содержимое не всего абзаца, а только внутренностей span'а
Ответить с цитированием
  #10 (permalink)  
Старый 10.09.2013, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

nikolaymac,
посмотрите вариант редактирование содержимого ячеек таблицы
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
удалить элемент input с сохранением его значения в <td> Сергей1980 jQuery 1 29.08.2013 02:06
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 12:03
Копирование из одного input в другой input bar-boss Общие вопросы Javascript 7 08.04.2008 19:10
Разным элементам input - разное форматирование. Как? eclipse (X)HTML/CSS 1 25.10.2007 13:55