как создать в цикле несколько дочерних элементов одного уровня?
создана таблица, хочу с помощью функции создать несколько "детей" циклом for, но в результате создается только один..
в чем проблема цикла? как дочерние элементы создать циклом?
function createTr(){
var tr=document.createElement('tr');
for (var i=0; i<3; i++) //пускай например 3 элемента tr
document.getElementsByTagName('table')[0].appendChild(tr);
}
|
document.getElementsByTagName('table')[0].appendChild(tr.cloneNode(true));
|
Amphiluke, т.е. получается сначала нужно создать объект, а потом в цикле сделать нужное количество клонов?
|
Нет, не обязательно так. Просто так короче получается. Вообще, читайте о «родных» методах объекта HTMLTableElement типа insertRow().
|
Amphiluke, другими словами
var tr=document.createElement('tr');
- создает один экземпляр, который цикл не может вставить несколько раз? |
Вы в цикле пытаетесь вставить в таблицу строку, которая в ней уже имеется. Метод appendChild выдирает элемент из текущего родителя (если есть) и вставляет в новый. У вас старым и новым родителем оказывается один и тот же объект таблицы.
|
Amphiluke, на всякий))
У элемента table есть дочерний элемент tbody, а также нет смысла каждый элемент добавлять через цикл (представьте, что их будет 100), для этого их нужно сначала создать, а потом уже добавить |
Цитата:
Цитата:
|
Цитата:
<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>
|
Спасибо всем, разобрался...
|
На всякий случай )))
Цитата:
DimonCry, Вставляемый элемент надо обьявлять внутри цикла.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
td{
height: 20px;
width: 20px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<table border="1" bgcolor="#00FF00">
</table>
<script type="text/javascript">
function createTr(){
var f=document.createDocumentFragment();
for (var i=0; i<3; i++) {//пускай например 3 элемента tr
var tr=document.createElement('tr'),td=document.createElement('td');
tr.appendChild(td);
f.appendChild(tr)}
document.getElementsByTagName('table')[0].appendChild(f);
}
createTr()
</script>
</body>
</html>
|
рони, спасибо за совет, ну я же выше написал, что с innerHTML способ 'некорретен' и нужно делать делать с createDocumentFragment().
|
| Часовой пояс GMT +3, время: 16:09. |