Клонирование и вывод элемента с родительными значениями
7 марта 2013, 2:31
Автор: vitaly63
Доброго времени суток. Сразу переиду к делу. Есть HTML дерево:
Есть JS который должен клонировать изначальный вид таблицы (дело в том что после полной загрузки к элементу присваиваются разные события), потом после вызова функции удаления, удаляется блок и элемент перезагружается, из первоначального вида с удаленным блоком и параметры присваиваются заново (dynamicTab(TabElem);):
как мы видим "ClonTabElem" пере назначается заново с новым видом таблицы.
вроде все нормально за исключением следующего:
1) элемент "ClonTabElem" не клонирует таблицу в месте с родителем собственно и не выводит
2) из за первого пункта, "TabElem" выводит только параметры после id="StartClone" и ни как с этим блоком и сохраняет так же без родительного
3) если убрать некоторые проверки, то в первом случае, мы получим сохранение урезаного блока без родителя, а на втором скрипт не заработает, точнея заменит на пустоту.
Помогите решить проблему, как клонировать элемент в месте с родителем и произвести вывод, замену и сохранение, так же в месте с родительным элементом?
П.С. надстойка еще одного "div" не вариант.
<div id="StartClone">
<div id="BeginClone">
<div class="Table">
<div id="TextHeader" class="center borderOne">text header</div>
<div id="TextThis" class="center borderOne">this text</div>
<div id="ThisFooter" class="center borderOne">end text</div>
</div>
</div>
</div>
<span onclick="deleteText('Header');">удалить элемент 1</span>
<span onclick="deleteText('This');">удалить элемент 2</span>
<span onclick="deleteText('Footer');">удалить элемент 3</span>
<div id="BeginClone">
<div class="Table">
<div id="TextHeader" class="center borderOne">text header</div>
<div id="TextThis" class="center borderOne">this text</div>
<div id="ThisFooter" class="center borderOne">end text</div>
</div>
</div>
</div>
<span onclick="deleteText('Header');">удалить элемент 1</span>
<span onclick="deleteText('This');">удалить элемент 2</span>
<span onclick="deleteText('Footer');">удалить элемент 3</span>
Есть JS который должен клонировать изначальный вид таблицы (дело в том что после полной загрузки к элементу присваиваются разные события), потом после вызова функции удаления, удаляется блок и элемент перезагружается, из первоначального вида с удаленным блоком и параметры присваиваются заново (dynamicTab(TabElem);):
var ClonTabElem = $("#StartClone").clone();
function deleteText(elem) {
var TabElem = $('.StartClone',ClonTabElem);
$('div#Text'+ elem, TabElem).detach();
ClonTabElem = $('#StartClone',TabElem);
$("#StartClone").replaceWith(TabElem);
dynamicTab(TabElem);
}
function deleteText(elem) {
var TabElem = $('.StartClone',ClonTabElem);
$('div#Text'+ elem, TabElem).detach();
ClonTabElem = $('#StartClone',TabElem);
$("#StartClone").replaceWith(TabElem);
dynamicTab(TabElem);
}
как мы видим "ClonTabElem" пере назначается заново с новым видом таблицы.
вроде все нормально за исключением следующего:
1) элемент "ClonTabElem" не клонирует таблицу в месте с родителем собственно и не выводит
2) из за первого пункта, "TabElem" выводит только параметры после id="StartClone" и ни как с этим блоком и сохраняет так же без родительного
3) если убрать некоторые проверки, то в первом случае, мы получим сохранение урезаного блока без родителя, а на втором скрипт не заработает, точнея заменит на пустоту.
Помогите решить проблему, как клонировать элемент в месте с родителем и произвести вывод, замену и сохранение, так же в месте с родительным элементом?
П.С. надстойка еще одного "div" не вариант.