VPF::[JS && PHP] Динамическое добавление полей

Guedda

Дата 31.8.2007, 13:28 (ссылка)

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

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Есть такие поля:
user posted image

Код этих полей:

Код


<tr id="newline" nomer="[0]">
    <td width="30%"><input type="text" name="property_id[0]" id="property_id[0]" value="" style="width:100%"></td>
    <td width="50%"><input type="text" name="property_title[0]" id="property_title[0]" value="" style="width:100%"></td>
    <td width="10%">
        <select name="property_type[0]" id="property_type[0]">
        <option></option>
        <option value="string">строка</option>
        <option value="text">текст</option>
        <option value="int">число</option>
        </select>
    </td>
    <td valign="top"align="right"><input type="button" value="-" style="width:22px"></td>
    <td valign="top"align="left"><input type="button" value="+" style="width:22px"></td>
</tr>

Как мне сделать так, чтобы при нажатии на + добавлялись ниже поля, но содержимое этих полей (которые уже есть) не удалялось, а при минусе удалялось поле?

Если что не понятно, спрашивайте. Я вроде как все нормально обьяснил.

Заранее благодарю за ответ.

Добавлено через 2 минуты и 7 секунд
и чтобы в аргументах nomer, property_id менялись значения по возрастающей.

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

Ll 2

comtat

Дата 31.8.2007, 21:17 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

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

Guedda ты извини меня конечно, но меня мучает лень smile

поэтому сделал только для одного поля

Код


<html><body>
<script language="javascript" src="./prototype.js"></script>
<script>empCnt = 0;</script>
<script>
function dropEmp(id) {
    Element.hide("emptr" + id );
    $("ExtraEmployees[" + newId + "]").value = 0;
} 
function CreateNewEmp() {
    td = document.createElement("TD");
    newId = ++empCnt;
    td.id = "empfield"+(newId);
    tr = document.createElement("TR");
    tr.appendChild(td);
    tr.id = "emptr"+newId;
    $("employees").appendChild(tr);
    td.innerHTML = "<INPUT class=pubutton style='WIDTH: 96%; CURSOR: auto' name=ExtraEmployees[" + newId 
        + "][name] inStack=true " + 
        "defClassName=pubutton autocomplete=off><INPUT " +
        "id=ExtraEmployees[" + newId + "] type=hidden name=ExtraEmployees[" + newId 
        + "]> <a href='javascript:dropEmp(" + newId+ ")'> - </a>";
}
</script>

<table>
<tr><td>
    <table width=100%><tbody id='employees'>
        <tr><td id='EmployeeReload'><input type="text" name="property_id[0]" id="property_id[0]" value="" style="width:100%">&nbsp;<a href='javascript:CreateNewEmp();'>+</a></td></tr>
    </tbody></table>
</td></tr>
</table></body></html>

Я думаю тебе это поможет.. Удачи !!!

P.S. Сделаю для всех полей

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

Присоединённый файл ( Кол-во скачиваний: 7 )

prototype.js 46,33 Kb

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

Рожденный в СССР !!!
ExtJS - мой фреймворк

SelenIT

Дата 1.9.2007, 12:10 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Вот что у меня получилось:

Код


<script type="text/javascript">

// добавление ряда
function add(ob) {
   // клонируем TR-ку со всем содержимым
   var tr = ob.cloneNode(true);

   // увеличиваем "аутоинкремент"
   add.counter++;

   // меняем id и name новых полей, обнуляем их значения   
   var inputs = tr.getElementsByTagName('input');
   var nomerToChange = /\[\d+\]$/, nomerToReplace = '['+add.counter+']';
   for (var i=0; i<inputs.length; i++) {
      inputs[i].id = inputs[i].id.replace(nomerToChange, nomerToReplace);
      inputs[i].name = inputs[i].name.replace(nomerToChange, nomerToReplace);
      if (inputs[i].type != 'button') inputs[i].value = '';
   }
   var select = tr.getElementsByTagName('select')[0];
   select.id = select.id.replace(nomerToChange, nomerToReplace);
   select.name = select.name.replace(nomerToChange, nomerToReplace);
   select.selectedIndex = 0;

   // задаем "номер" строке (непонятно, правда, зачем?;)
   tr.setAttribute('nomer', nomerToReplace);

   // если есть следующая tr-ка, вставим новую перед ней, иначе - в конец таблицы
   // цикл нужен для учета текстовых нод между тегами в Gecko
   var  nextTr=ob;
   do { nextTr = nextTr.nextSibling; } while (nextTr && nextTr.nodeType != 1);
   if (nextTr) ob.parentNode.insertBefore(tr,nextTr);
   else ob.parentNode.appendChild(tr);
}

// удаление ряда
function remove(ob) {
   if (ob.parentNode.getElementsByTagName('tr').length > 1) {
      ob.parentNode.removeChild(ob);
   }
   else alert('Нельзя удалить последнюю строку!');
}

// инициализация "аутоинкремента"
add.counter = 0;

</script>
<form action="info.php">
<table>
<tr id="newline" nomer="[0]">
    <td width="30%"><input type="text" name="property_id[0]" id="property_id[0]" value="" style="width:100%"></td>
    <td width="50%"><input type="text" name="property_title[0]" id="property_title[0]" value="" style="width:100%"></td>
    <td width="10%">
        <select name="property_type[0]" id="property_type[0]">
        <option></option>
        <option value="string">строка</option>
        <option value="text">текст</option>
        <option value="int">число</option>
        </select>
    </td>
    <td valign="top"align="right"><input type="button" value="-" style="width:22px" onclick="remove(this.parentNode.parentNode)"></td>
    <td valign="top"align="left"><input type="button" value="+" style="width:22px" onclick="add(this.parentNode.parentNode)"></td>
</tr>
</table>
<input type="submit">
</form>

Возможно, я неправильно понял задачу "чтобы в аргументах nomer, property_id менялись значения по возрастающей" - я реализовал подобие аутоинкремента в БД, эти цифры у каждого нового поля заведомо больше, чем у любого старого, но при удалении ничего не пересчитывается (остаются пропуски). Имхо, так надежнее и в чем-то логичнее... но если надо, чтобы всегда была сплошная нумерация - могу переделать (хотя возни будет больше)...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Guedda

Дата 3.9.2007, 09:28 (ссылка)

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

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

К сожалению, оба метода не работают в Опере.
Есть ли еще варианты?

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

Ll 2

SelenIT

Дата 3.9.2007, 19:01 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Guedda, в какой версии Оперы проблема? Я проверял свой вариант в 9.22, 8.02 и 8.5 - у меня работает...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Guedda

Дата 3.9.2007, 20:56 (ссылка)

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

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

Хм... Нк ладно... У меня та же версия. Попробую переустановить.

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

Ll 2

Guedda

Дата 12.10.2007, 12:17 (ссылка)

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

Загрузка ...

Подрывник

Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

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

В общем, изменяю немного заголовок, и описываю проблему:
Есть таблица с некоторыми полями, допустим:
ID | NAME | PATH
Я хочу сделать так, чтобы к этой таблице добавлялись некоторые поля через то, что написано в первом посте (первый инпут - название поля, второй инпут - описание, третий - тип поля). В другой таблице есть описание всех полей через сериализ.
Вопрос:
Напишите пожалуйста скрипт, который бы добавлял либо удалял поля с таблицы.

Заранее благодарен.

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

Ll 2

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