| nikolaymac |
09.09.2013 15:13 |
Удаление и редактирование динамических 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>
|