03.09.2013, 08:45
|
|
Аспирант
|
|
Регистрация: 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??
|
|
03.09.2013, 11:27
|
|
Профессор
|
|
Регистрация: 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 в 11:41.
|
|
03.09.2013, 12:58
|
|
Аспирант
|
|
Регистрация: 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>
Сделал немного по другому уже сам.. спасибо за ответ! приму к сведенью.. думаю как щас ограничить редактирование .. т.е. что в режиме редактирования была только одна строка ??
|
|
03.09.2013, 13:11
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Используйте флаг.
var flag = true;
function editShow () {
if (flag) {
flag = false;
} else {
return false;
}
}
|
|
04.09.2013, 14:41
|
|
Аспирант
|
|
Регистрация: 26.06.2013
Сообщений: 33
|
|
Все получилось !! отлично ! остался еще одна делать.. с помощью каких методов сделать след.
Когда область с данными добавленными по кнопке Добавить строку переполняется и появляется скролл то строку Итог нужно приклеить к нижнему края экрана! Приклеить когда скрол я сделал так
$(window).scroll(function()
{$('#forItog').css({'border':'1px solid #000000','position':'fixed','bottom':'0px','left':'15px'});
});
Нужно убрать position и сделать как раньше когда скрол доходит до низа страницы |
|
05.09.2013, 09:11
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
|
Приведите пример. Я у вас вообще не вижу "Итог".
|
|
05.09.2013, 13:06
|
|
Аспирант
|
|
Регистрация: 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>
Уже незнаю как быть.. осталось сделать след.. Когда появляется скрол то Итог прилепает к нижнему краю.. когда скрол доходит до низа Итог должен вставать обратно на место! а у меня начинаются глюки какие то
|
|
05.09.2013, 13:07
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
$('input').keydown(function (e) {
if (e.keyCode == 13)
$('сохранить').click()
});
|
|
05.09.2013, 13:09
|
|
Аспирант
|
|
Регистрация: 26.06.2013
Сообщений: 33
|
|
Сообщение от tsigel
|
$('input').keydown(function (e) {
if (e.keyCode == 13)
$('сохранить').click()
});
|
спасибо это сделал... последний шаг остался ) |
|
05.09.2013, 13:13
|
|
Профессор
|
|
Регистрация: 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>
|
|
|
|
