Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Добавление/удаление элемнтов формы! (Dayw)
Author Message
Dayw
Участник форума



Joined: 09 Jun 2006
Posts: 22
Карма: 0
   поощрить/наказать


PostPosted: Sat Apr 28, 2007 1:35 pm (написано за 3 минуты 38 секунд)
   Post subject: Добавление/удаление элемнтов формы!
Reply with quote

Мне нужно сделать, так, чтобы при нажатии на кнопку "добавить", добавлялся элемент формы <input type=file>
А при нажатии на "Удалить" последний из всех созданных элементов удалялся.
Как добавить я сделал, вот функция:
Code (JavaScript): скопировать код в буфер обмена
function addRow(id){
    var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
var file = document.createElement( "input" );
    file.type = "file";
    file.name = "uploadfile[]";
    td1.appendChild(file);
       row.appendChild(td1);
    tbody.appendChild(row);
  }
Если не трудно напишите функцию, для удаления элемента созданого выше фунцией.
читал про DOM но ничего понять не могу ((
Back to top
View user's profile Send private message
AKS
Участник форума



Joined: 28 Dec 2005
Posts: 1174
Карма: 102
   поощрить/наказать


PostPosted: Sat Apr 28, 2007 2:13 pm (спустя 38 минут; написано за 6 минут 43 секунды)
   Post subject:
Reply with quote

Dayw
1. Пусть функция addRow возвращает интересующее Вас поле выбора файла:
Code (JavaScript): скопировать код в буфер обмена
// последняя строка в addRow
return file;
2. При вызове функции нужно сохранить возвращаемый элемент где-нибудь, например в массиве:
Code (JavaScript): скопировать код в буфер обмена
var arr = [];
arr[arr.length] = addRow('someID');
3. В любой момент можно получить доступ к любому созданному полю и удалить его, например так:
Code (JavaScript): скопировать код в буфер обмена
function removeElem(aElem) {
    aElem.parentNode.removeChild(aElem);
}
// удаление последнего элемента
removeElem(arr[arr.length - 1]);
Если не подходит вариант с массивом, хранящим ссылки на поля выбора файла, то можно при создании этих самых полей задавать им ID, а затем "подбираться" к ним посредством document.getElementById(). Можно и еще что-нибудь придумать - это на ваше усмотрение...
Back to top
View user's profile Send private message Send e-mail
Dayw
Участник форума



Joined: 09 Jun 2006
Posts: 22
Карма: 0
   поощрить/наказать


PostPosted: Sat Apr 28, 2007 6:03 pm (спустя 3 часа 50 минут; написано за 2 минуты 22 секунды)
   Post subject:
Reply with quote

Понравилась идея:
Quote:
Если не подходит вариант с массивом, хранящим ссылки на поля выбора файла, то можно при создании этих самых полей задавать им ID, а затем "подбираться" к ним посредством document.getElementById(). Можно и еще что-нибудь придумать - это на ваше усмотрение...
Но вот как добавлять уникальный ID к каждому создаваемому элементу, а потом передать значение последнего ID с функцию удаления?
Back to top
View user's profile Send private message
AKS
Участник форума



Joined: 28 Dec 2005
Posts: 1174
Карма: 102
   поощрить/наказать


PostPosted: Sat Apr 28, 2007 8:30 pm (спустя 2 часа 26 минут; написано за 6 минут 10 секунд)
   Post subject:
Reply with quote

Dayw wrote:
Понравилась идея...
А мне не понравилась. Глядя на вашу функцию с добавлением рядов в тело таблицы, можно предположить, что проще удалять последний ряд:
Code (JavaScript): скопировать код в буфер обмена
function removeElem(id) {
    var tbody = document.getElementById(id)
                        .getElementsByTagName('tbody')[0],
        len = tbody.rows.length;
    tbody.deleteRow(len - 1);
}
Но такой вариант не подойдет, если будет возможность добавлять ряды без полей выбора (т.е. можно удалить ряд без поля).
Точно такая же проблема будет и с ID, если его присваивать как-то так:
Code (JavaScript): скопировать код в буфер обмена
file.id = 'file' + row.rowIndex;
Найдя потом индекс последнего ряда, нельзя быть уверенным, что это будет то, что нужно...
Можно, конечно, попробовать удалять последний элемент коллекции document.getElementsByName('uploadfile[]'). Тогда понадобится небольшая коррекция функции addRow для IE (перепишите условие нормально - это я по-быстрому только ради проверки):
Code (JavaScript): скопировать код в буфер обмена
var file = document.createElement(window.execScript
                                  ? '<input name="uploadfile[]">'
                                  : 'input');
Back to top
View user's profile Send private message Send e-mail
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML