динамическое добавление и редактирование полей 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?? |
<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>
Оформляйте ваши вопросы, от этого зависит желание вам помочь. Немного по редактировал но там бы все переписать. |
<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>
Сделал немного по другому уже сам.. спасибо за ответ! приму к сведенью.. думаю как щас ограничить редактирование .. т.е. что в режиме редактирования была только одна строка ?? |
Используйте флаг.
var flag = true;
function editShow () {
if (flag) {
flag = false;
} else {
return false;
}
}
|
Все получилось !! отлично ! остался еще одна делать.. с помощью каких методов сделать след.
Когда область с данными добавленными по кнопке Добавить строку переполняется и появляется скролл то строку Итог нужно приклеить к нижнему края экрана! Приклеить когда скрол я сделал так
$(window).scroll(function()
{$('#forItog').css({'border':'1px solid #000000','position':'fixed','bottom':'0px','left':'15px'});
});
Нужно убрать position и сделать как раньше когда скрол доходит до низа страницы |
Приведите пример. Я у вас вообще не вижу "Итог".
|
<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>
Уже незнаю как быть.. осталось сделать след.. Когда появляется скрол то Итог прилепает к нижнему краю.. когда скрол доходит до низа Итог должен вставать обратно на место! а у меня начинаются глюки какие то |
$('input').keydown(function (e) {
if (e.keyCode == 13)
$('сохранить').click()
});
|
Цитата:
|
<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>
|
| Часовой пояс GMT +3, время: 13:36. |