Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Поиск элемента в копии таблицы(cloneNode(true)) (https://javascript.ru/forum/misc/2460-poisk-ehlementa-v-kopii-tablicy-clonenode-true.html)

4ert_ 29.12.2008 13:51

Поиск элемента в копии таблицы(cloneNode(true))
 
Добрый день!
Задача следующая, есть некоторая таблица с множеством вложений, их количество и порядок нам неизвестен, нам известно только ID таблицы. Вся эта таблица должна храниться в переменной. Делаю так:

function savePatternTable(ID)
{
if(MULTI[ID])
{
Counts[ID]=1;
MULTI[ID]=document.getElementById(ID).cloneNode(true); //сохраняем копию таблицы
}
}


Далее мне необходимо найти элемент в этой копии(чтобы изменить его), известен только ID элемента, и ID копии таблицы. как можно реализовать такое? причем уровень вложенности элементов в таблице может быть бесконечно велик.

Буду благодарен за любую помощь, намек или подсказку:)

Octane 29.12.2008 14:07

Во время копирования, приписывайте префикс к имени идентификатора, иначе document.getElementById(...) будет выдавать первый найденый элемент с таким идентификатором и неважно есть этот элемент в дереве или нет.

4ert_ 29.12.2008 14:32

Это то понятно:) так уже делается в самом html. Но вот в чем суть, таблице разные по структуре, но у всех у них, есть скажем поле name примерно такого значение: TABLE_TITLE_{ID_ROOT_TABLE}....


Так поясню подробнее задачи, пытаюсь реализовать механизм размножения таблиц(таблицы различаются). Изначально на странице появляется по одной таблице каждого типа, после загрузки каждой уникальной таблицы запускается savePatternTable('{ID_ROOT_TABLE}') - сохраняем исходное состояние каждой уникальной таблицы(таблицы имеют элементы ввода,которые могут изменятся). ID_ROOT_TABLE - это ID уникальной таблицы, для первой оригинальной таблицы примерно такого вида: CUT_IMAGE[0]..... Теперь нажав плюсик возле какой-то таблички, у нас под ней должна появится ее копия, только все ID в этой копии, должны быть изменится, например для первой копии: CUT_IMAGE[1].

Дык вот получается такая задача, что сохранив копию уникальной таблицы, для добавления ее экземпляра на страницу, нужно пройтись по сохраненной копии и заменить все ID на другие.

Задача в прицнипе тривилаьная, если точно знаем уровень вложенности элементов в таблицу. Но в моем случае это не так, все таблицы кардинально отличаются друг от друга как по уровню вложенности элементов, так и по их количеству.Едиснтвенное что нам известно, так это массив ID которые мы должны изменить, примерно в таком виде: Array('CUT_IMAGE','IMAGE_WIDTH','IMAGE_HEIGHT'), а также номер последней добавленной на страницу копии таблицы(под которой нажали плюс).


Кратко говоря алгоритм такой: на старте есть несколько уникальных таблиц, сохраняем их структуру и первоначальные значения элементов ввода в шаблон(MULTI[ID]), далее чтобы создать еще один экземпляр какой-то таблицы, копируем шаблон соответствующий ей, проходим по всем необходимым нам ID в этой копии шаблона и меняем циферку в [] на значение Counts[ID], затем выводим копию шаблона, и прибавляем единицу к Counts[ID]

Octane 29.12.2008 14:50

Ну не используйте идентификаторы, раз не хотите их вручную менять, есть куча других способов найти узел в DOM-дереве

4ert_ 29.12.2008 15:04

Хм.... я совсем слаб еще в javascript и о других методах незнаю:(((.... Могли бы вы подсказать примерчик, или где можно прочесть. решение вот такой вот конкретной задачи:

Есть одна оригинальная таблица(IMAGE_TABLE[0] ее ID), она лежит в форме, в таблице есть поля(при чем мы понятия не имеем где, на каком уровне вложенности, в обычном td или в еще одной таблице):

<input type='text' name='WIDTH[0]'  value='100'><!-- 100 значение по умолчанию -->
<input type='text' name='HEIGHT[0]'  value='100'><!-- 100 значение по умолчанию -->


Вот мы ввели туда 400 и 300 в WIDTH[0] и HEIGHT[0] соответственно.

Далее решили, что одного изображения нам будет мало, и нажали плюсик под этой таблицей.

Ниже первой таблицы, появилась ее копия, но с одним "НО", элементы она имеет такие:

<input type='text' name='WIDTH[1]'  value='100'><!-- 100 значение по умолчанию -->
<input type='text' name='HEIGHT[1]'  value='100'><!-- 100 значение по умолчанию -->[/htnl]
, а ID у ней уже должен стать IMAGE_TABLE[1] 

ВО второй таблице тоже ввели какие то данные, и решили, что никак и без третьего изображения. Нажимаем еще раз плюс. И у нас оявляется, третий экзмепляр таблицы, но уже с такими полями:

[html]<input type='text' name='WIDTH[2]'  value='100'><!-- 100 значение по умолчанию -->
<input type='text' name='HEIGHT[2]'  value='100'><!-- 100 значение по умолчанию -->

,и с ID = IMAGE_TABLE[2]
================================================== ===========

Все что нам дается при старте:
Код:

var MULTI=new Array(
                                'IMAGE_TABLE[0]' => true //говорим что таблица IMAGE_TABLE[0]  готова к размножению
                                 
                                'COM_TABLE[0]' => false//не готова к размножению
                                );

var FIELDS=new Array(
                                    'IMAGE_TABLE[0]'  => array('WIDTH','HEIGHT','IMAGE_TABLE') //префиксы которые мы должны изменять при создании копии, для таблицы IMAGE_TABLE[0]
                                  );

==================================================
Как мне менять name, при создании каждой копии таблицы?

Заранее спасибо!

Octane 29.12.2008 15:20

В именах идентификаторов нельзя использовать квадратные скобочки.
В вашем случае лучшим вариантом будет не хранить копию таблицы, а пересоздавать её заново методами DOM (createElement, insertCell, insertRow и т.д.) или простой конкатенацией строк, используя, для формирования имен и идентификаторов, переменную-индекс.


Часовой пояс GMT +3, время: 06:18.