Arik
Новичок
проблема с привязкой функции для динамически создаваемых объектов
Есть такая проблема - ни как не могу справится с привязкой функции через DOM в JavaScript.
Имеется таблица, которая построчно формируется из БД. Кроме того есть кнопка добавить строку, которая заносит в эту таблицу еще одну запись. Все это работало прекрасно до того, появилась необходимость эти строки таблицы поднимать и опускать с помощью кнопочек, то есть, менять их сортировку динамически. Все, что было сформировано из БД прекрасно прыгает по таблице, а вот динамические строки глючат.
Теперь по коду:
Функция, что генерит новую строку
function add(){
var table = document.getElementById('add');
var point = document.getElementById('insert_point');
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
var link1 = document.createElement('a');
link1.setAttribute("href", "javascript: void(0);");
link1.setAttribute("onclick", Function ("move(this, 1)") );
//link1.setAttribute("onclick", 'move(this, 1)' ); Вначале было так
inp1.setAttribute("name", "tabl_title[]");
inp1.style.width="150px";
inp2.setAttribute("name", "tabl_text[]");
inp2.style.width="150px";
table.insertBefore(tr,point);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td1.appendChild(inp1);
td2.appendChild(inp2);
td3.appendChild(link1);
link1.appendChild(document.createTextNode('Вверх') );
inputs++;
}
Функция что двигает строку (сокращенный вариант, только вверх)
function move(elem, direction) {
var table = document.getElementById('add');
var switch_elem = elem.parentNode.parentNode;
var sibling_elem = switch_elem.previousSibling;
if (sibling_elem.id != "first") {
var temp_elem = switch_elem.cloneNode(true);
switch_elem.parentNode.removeChild(switch_elem);
table.insertBefore(temp_elem,sibling_elem);
}
}
Что происходит - все сгенеренные из БД строки прыгают как надо. Динамически сгенереная строка прыгает один раз и на этом стопорится. Помогите разобраться с проблемой.
Также присоединю маленький вопрос: есть ли возможность повлиять на порядок элементов в массиве, что получаем в PHP после отправки. Элементы формы проименованы таким образом name="tabl_text[]" И они перемещаются вместе со строками. Или порядок задается строго фиксировано по очереди их создания на странице?
Есть такая проблема - ни как не могу справится с привязкой функции через DOM в JavaScript.
Имеется таблица, которая построчно формируется из БД. Кроме того есть кнопка добавить строку, которая заносит в эту таблицу еще одну запись. Все это работало прекрасно до того, появилась необходимость эти строки таблицы поднимать и опускать с помощью кнопочек, то есть, менять их сортировку динамически. Все, что было сформировано из БД прекрасно прыгает по таблице, а вот динамические строки глючат.
Теперь по коду:
Функция, что генерит новую строку
function add(){
var table = document.getElementById('add');
var point = document.getElementById('insert_point');
var tr = document.createElement('TR');
var td1 = document.createElement('TD');
var td2 = document.createElement('TD');
var td3 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
var link1 = document.createElement('a');
link1.setAttribute("href", "javascript: void(0);");
link1.setAttribute("onclick", Function ("move(this, 1)") );
//link1.setAttribute("onclick", 'move(this, 1)' ); Вначале было так
inp1.setAttribute("name", "tabl_title[]");
inp1.style.width="150px";
inp2.setAttribute("name", "tabl_text[]");
inp2.style.width="150px";
table.insertBefore(tr,point);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td1.appendChild(inp1);
td2.appendChild(inp2);
td3.appendChild(link1);
link1.appendChild(document.createTextNode('Вверх') );
inputs++;
}
Функция что двигает строку (сокращенный вариант, только вверх)
function move(elem, direction) {
var table = document.getElementById('add');
var switch_elem = elem.parentNode.parentNode;
var sibling_elem = switch_elem.previousSibling;
if (sibling_elem.id != "first") {
var temp_elem = switch_elem.cloneNode(true);
switch_elem.parentNode.removeChild(switch_elem);
table.insertBefore(temp_elem,sibling_elem);
}
}
Что происходит - все сгенеренные из БД строки прыгают как надо. Динамически сгенереная строка прыгает один раз и на этом стопорится. Помогите разобраться с проблемой.
Также присоединю маленький вопрос: есть ли возможность повлиять на порядок элементов в массиве, что получаем в PHP после отправки. Элементы формы проименованы таким образом name="tabl_text[]" И они перемещаются вместе со строками. Или порядок задается строго фиксировано по очереди их создания на странице?