Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Динамическая вёрстка ссылок для навигации:проблемка :( (https://javascript.ru/forum/events/2185-dinamicheskaya-vjorstka-ssylok-dlya-navigacii-problemka.html)

Mitrandir 15.11.2008 20:23

Динамическая вёрстка ссылок для навигации:проблемка :(
 
Доброго времени суток, товарищи кодеры!

Вот, мучаю DOM помаленьку;хотел недавно несколько автоматизировать процесс создания ссылок для перемещения по многостраничному HTML документу. Ссылки помещенны в таблицу с одной ячейкой. Так вот, чтобы
каждый раз не писать нечто вроде:
<a href = "1.html"> 1 </a><a href ="2.html"> 2 </a><a href = "n.html"> n </a>


Сварганил следущий код:
function createHLink(q)
{var hlink = new Array(q);
 var array_text = new Array(q);
 for(var l = 1;l<=q;l++){
	hlink[l] = document.createElement("a");
	hlink[l].href = l+".html";}
 	
for (var m = 1;m <=q;m++ ){
	array_text[m] = m;
	var oText = document.createTextNode(array_text[m]);
        hlink[m].appendChild(oText);}	
bodytbl = document.getElementById("tbl");
bodytbl.rows[0].cells[0].appendChild(hlink)
}


В последней строчке скрипта FireBug выдаёт ошибку:
"Невозможно добавить данный узел в иерархию узлов Код №3"
Как я понимаю это происходит вследствии того, что с помощью
appendChild() невозможно добавить массив целиком в дерево узлов DOM.
Наверно придёться использовать совершенно другой подход к решению задачи или ёще можно помучать сей код. Кто подскажет, ЧТО ДЕЛАТЬ?

Kolyaj 15.11.2008 21:44

Цитата:

Сообщение от Mitrandir
невозможно добавить массив целиком в дерево узлов DOM

Разумеется.

Цитата:

Сообщение от Mitrandir
ЧТО ДЕЛАТЬ?

Добавлять элементы по отдельности.

Mitrandir 15.11.2008 21:53

Ага!
Ну с добавлением элементов по отдельности вопрос более менее ясен.
А сам, если так можно выразиться алгоритм решения задачи не шибко
крив да кос будет?!

Kolyaj 15.11.2008 22:08

Ну он крив да кос изначально. Такие вещи на сервере делаются.

Mitrandir 16.11.2008 08:25

[offtop]
Kolyaj
То, что такие вещи удобнее делать на стороне сервера - сие и ежу понятно:).
А вот, если веб-страничка на старом-добром Narod.RU.
и не хочеться многократно вручную дублировать один и тот-же
HTML код - я считаю это хоть кривым, но всё же выходом из положения.
************************
Вот теперь для добавления элементов массива по отдельности в дерево узлов сделаем цикл for ( in ) и дело в шляпе...

Mitrandir 17.11.2008 20:34

Задача решена!
 
Товарищи, если кому интересно привожу код динамической вёрстки
ссылок на JavaScript ( извращенство, конечно, зато часть работы делает
машина :) ) Итак,
function createHLink(q)
{	var hlink = new Array(q);
	var array_text = new Array(q);
 for(var l = 1;l<=q;l++){
	hlink[l] = document.createElement("a");
	hlink[l].href = l+".html";}
 	
for (var m = 1;m <=q;m++ ){
	array_text[m] = m + " " ;
	var oText = document.createTextNode(array_text[m]);
        hlink[m].appendChild(oText);}	
bodytbl = document.getElementById("tbl");
var F = document.createDocumentFragment();
for (var i in hlink){
	bodytbl.rows[0].cells[0].appendChild(hlink[i]);
}
F.appendChild(bodytbl);
document.body.appendChild(F);
}

Все просто и ясно.
Прошу ваших отзывов в топик.

Kolyaj 17.11.2008 21:36

Цитата:

Сообщение от Mitrandir
Прошу ваших отзывов в топик.

Вау, реальни круто!

PavelPetrov 08.12.2008 00:31

Цитата:

извращенство, конечно
Три цикла с одним условием можно объеденить в один, массивы тогда не нужны. Потом, это решение совсем не для этой задачи. Ее можно решить и через Element.innerHTML
function createHLink(q){
	var Link_Str="";
	for (var l=1;l<=q;l++){
	Link_Str+="<a href=\""+l+".html\" style=\"margin-right:4px;\">"+l+"</a>";
	}
	document.getElementById("tbl").rows[0].cells[0].innerHTML=Link_Str;
}

Согласитесь проще. Ну а если "извращаться", то с более сложными объектами, вложенные меню к примеру.

ЗЫ: страницы, ссылки на которые сделаны скриптом, не индексируются поисковыми системами.

Mitrandir 29.12.2008 21:52

Совершенству нет предела;)
 
Да действительно этот способ проще приведенного мной, хотя и не такой
наглядный примером новичку.


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