Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2011, 21:48
Интересующийся
Отправить личное сообщение для DimonCry Посмотреть профиль Найти все сообщения от DimonCry
 
Регистрация: 04.01.2011
Сообщений: 23

как создать в цикле несколько дочерних элементов одного уровня?
создана таблица, хочу с помощью функции создать несколько "детей" циклом for, но в результате создается только один..
в чем проблема цикла? как дочерние элементы создать циклом?
function createTr(){
var tr=document.createElement('tr');
for (var i=0; i<3; i++) //пускай например 3 элемента tr
document.getElementsByTagName('table')[0].appendChild(tr);
}
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2011, 21:54
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

document.getElementsByTagName('table')[0].appendChild(tr.cloneNode(true));
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2011, 21:59
Интересующийся
Отправить личное сообщение для DimonCry Посмотреть профиль Найти все сообщения от DimonCry
 
Регистрация: 04.01.2011
Сообщений: 23

Amphiluke, т.е. получается сначала нужно создать объект, а потом в цикле сделать нужное количество клонов?
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2011, 22:02
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Нет, не обязательно так. Просто так короче получается. Вообще, читайте о «родных» методах объекта HTMLTableElement типа insertRow().
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2011, 22:13
Интересующийся
Отправить личное сообщение для DimonCry Посмотреть профиль Найти все сообщения от DimonCry
 
Регистрация: 04.01.2011
Сообщений: 23

Amphiluke, другими словами
var tr=document.createElement('tr');
- создает один экземпляр, который цикл не может вставить несколько раз?
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2011, 22:21
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Вы в цикле пытаетесь вставить в таблицу строку, которая в ней уже имеется. Метод appendChild выдирает элемент из текущего родителя (если есть) и вставляет в новый. У вас старым и новым родителем оказывается один и тот же объект таблицы.
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2011, 22:21
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Amphiluke, на всякий))
У элемента table есть дочерний элемент tbody, а также нет смысла каждый элемент добавлять через цикл (представьте, что их будет 100), для этого их нужно сначала создать, а потом уже добавить

Последний раз редактировалось monolithed, 12.01.2011 в 22:38.
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2011, 22:31
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Сообщение от monolithed
у элемента table есть дочерний элемент tbody
Так точно. Поэтому, в частности, я и рекомендую использовать метод insertRow(), хотя работает и простой appendChild в table.

Сообщение от monolithed
для этого их нужно сначала создать, а потом уже добавить
Ну да, тоже не поспоришь. Всякий раз при добавлении элемента в DOM происходят тяжелые для браузера процедуры reflow и repaint. Поэтому можно вставлять ноды во временный объект DocumentFragment, который затем разом вставить на страницу.
Ответить с цитированием
  #9 (permalink)  
Старый 12.01.2011, 22:36
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от Amphiluke
Поэтому можно вставлять ноды во временный объект DocumentFragment, который затем разом вставить на страницу.
да, можно и даже желательно использовать documentFragment() или же его метод cloneNode(), но можно и даже так, как вариант (только тут есть нюансы новые элементы так скажем не совсем в DOM, т.е. единственным дочерним элементом тут будет tbody):
<script type="text/javascript">
window.onload = function(){
    var table = document.getElementsByTagName('tr')[0], tr = '<td style="border: 1px solid"/>', array = [], i = 0;
    while(++i<=4){
        array.push(tr+'td'+i);
    }
    table.innerHTML = array.join('');
};
</script>

<table><tr/></table>

Последний раз редактировалось monolithed, 12.01.2011 в 22:56.
Ответить с цитированием
  #10 (permalink)  
Старый 12.01.2011, 22:44
Интересующийся
Отправить личное сообщение для DimonCry Посмотреть профиль Найти все сообщения от DimonCry
 
Регистрация: 04.01.2011
Сообщений: 23

Спасибо всем, разобрался...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как обрамить несколько элементов в ul Alexxx jQuery 21 31.05.2010 15:17
Как изменить background всех дочерних элементов внутри <div>? libinstyle Общие вопросы Javascript 2 24.03.2010 13:25
как можно создать iframe со скриптами GOll Общие вопросы Javascript 2 05.05.2009 11:32
Как обработать несколько элементов подряд? vladymyrk jQuery 1 07.01.2009 20:33
как создать елемент с вложеными елементами scuter Events/DOM/Window 11 14.05.2008 16:15