VPF::создать текстовое поле - Форум программистов

lumentek

Дата 5.7.2010, 16:47 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 180
Регистрация: 19.11.2009

Репутация: нет
Всего: нет

нужно сделать такое. есть форма в ней кнопка и текстовое поле. в текстовое поле указываем кол-во, и как только нажали на кнопку, то появились текстовые поля ровно столько, сколько было указано в количестве. иеще чтобы больше 10 нельзя было создать полей. нужно решение на jquery

CruorVult

Дата 5.7.2010, 20:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28

Код


function add() {    
    v=$("#myinput").val();
    div = $("#mydiv");
    div.html('');
    v = (v>10)? 10:v;
    for(i=0;i<v;i++)
    {
        div.append("<input type='text'><br>");
    }
}

Код


<input type="text" id="myinput">
<input type="button" onclick="add()">
<div id="mydiv"></div>

12345c

Дата 8.7.2010, 01:21 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 3
Всего: 101

Код


function add() {
    if($("#mydiv input").length < Math.min($("#myinput").val(), 10)){
        div.append("<input/><br/>");
        add();
    }  
}

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

ArNic

Дата 8.7.2010, 09:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 3.1.2007

Репутация: нет
Всего: нет

Цитата(12345c @ 8.7.2010, 01:21)

Код


function add() {
    if($("#mydiv input").length < Math.min($("#myinput").val(), 10)){
        div.append("<input/><br/>");
        add();
    }  
}

Прошу не бить. Вопрос встречный. А на скорости это не скажется? Ведь length - это по сути опять же пробег по дереву и получение размера количества элементов. Т.е. в арифметической прогрессии нагрузка растет. Предлагаю другой код (суть не меняется - но он будет гораздо меньше нагружать браузер)

Код


function add() {
    var str; //строка, в коорую будет собиратьс всё
    l=$("#mydiv input").length; //количество текущих инпутов
    n=Math.min($("#myinput").val(), 10); //количество инпутов, котрые должны быть на страничке
    for(l=l;l<n;l++){ //Прогоняем циклом
        str+="<input/><br/>"; //Собираем строчку
    }
    div.append(div); // Добавляем в конец слоя сформированную строку состоящую из инпутов.
}

Убираем комментарии и получается:

Код


function add() {
    var str;
    l=$("#mydiv input").length;
    n=Math.min($("#myinput").val(), 10);
    for(l=l;l<n;l++){ str+="<input/><br/>"; }
    div.append(div); 
}

Не претендую на супер краткость - но и обращаться постоянно к add, работая повторно с деревом, не вижу смысла.

Это сообщение отредактировал(а) ArNic - 8.7.2010, 09:34

skyboy

Дата 8.7.2010, 10:13 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 3
Всего: 260

Цитата(ArNic @ 8.7.2010, 08:31

)

А на скорости это не скажется?

а какое количество тебе надо создать? 1000?

ArNic

Дата 8.7.2010, 10:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 3.1.2007

Репутация: нет
Всего: нет

Ну допустим столько не надо. Тем не менее привык учитывать в любом коде нагрузку. Поэтому и предлагаю вариант.
Да и потом, пробег по дереву просчитывая все инпуты по 20 раз например 10 циклов получается уже 200. А если добавляемых полей будет 100? Вот тебе как раз тысяча операций.

lumentek

Дата 15.7.2010, 01:02 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 180
Регистрация: 19.11.2009

Репутация: нет
Всего: нет

Спасибо большое! Еще вопрос. ужно с каждым создаваемым поле поставить сслыку - удалить поле. чтобы если что можно было удалить одно поле.
Можно конечно ввести в форму заново число, но она удалит введенные данные других полей

EmilRegis

Дата 15.7.2010, 08:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: нет
Всего: 4

надо удалить поле или удалить введённые в поле данные?

ArNic

Дата 15.7.2010, 17:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 3.1.2007

Репутация: нет
Всего: нет

прошу прощения за предыдущую корявку. Код не проверил. Но сейчас проверив - выложил уже работающий и с удалением.

Код


    function add() {
        var str='';
        div=$("#mydiv");
        l=$("input",div).length;
        n=Math.min($("#myinput").val(), 100);
        for(l=l;l<n;l++){str+='<div><input type="text" /><input type="button" value="удалить" onclick="del(this);" /></div>'; }
        div.append(str); 
    }
    function del(lnk){
        $(lnk).parent('div').remove();
    }
    function delAll(){
        $("#mydiv").html('');
    }

Код


<input type="text" id="myinput">
<input type="button" onclick="add();" value="Добавить">
<input type="button" onclick="delAll();" value="Удалить всё">
<div id="mydiv"></div>

Добавлено через 14 минут и 46 секунд
Забыл сказать: однострочные команды вынес в функции не только для читабельности, но и чтобы было проще дорабатывать. Например:

Код


    function del(lnk){
        div=$(lnk).parent('div');
        div.slideUp(function(){
               div.remove();
               alert('Строка удалена!');
        });
    }

А иначе можно всё уместить вообще в одной функции. Решать тебе.

Это сообщение отредактировал(а) ArNic - 15.7.2010, 17:17

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »