<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>
Уже незнаю как быть.. осталось сделать след.. Когда появляется скрол то Итог прилепает к нижнему краю.. когда скрол доходит до низа Итог должен вставать обратно на место! а у меня начинаются глюки какие то