Весь день сижу. никак не поулчается.
В общем полная задача у меня такая:
Преобразовать двухуровневые списки в таблицу, где элемент внешнего списка помещается в ячейку 1 столбца, а вложенный списки в ячейку второго. Ячейка 1 столбца распостраняется на все строки, занимаемые вложенным списком.
Вот Заголовки помещать в левый столбец у меня поулчилось. А вот как выбирать LI для данного UL я не пойму.
Сейчас у меня он все LI выводит в самый них второго столбца.....
вот он код весь.
function Mod(){
var new_table = document.createElement('table');
new_table.style.background = '#fff';
new_table.style.color = '#000';
new_table.border = '1';
new_table.cellSpacing = '0';
var new_table1 = document.createElement('table');
new_table1.style.background = '#fff';
new_table1.style.color = '#000';
new_table1.border = '1';
new_table1.cellSpacing = '0';
var new_div = document.createElement('div');
new_div.style.float = 'left';
new_div.style.margin = '10px';
var parent = document.getElementsByTagName('body')[0];
//массив UL (количество строк в левом столбце)
var mas_table = document.getElementsByTagName('ul');
//выбираем только заголовки (составляем массив outLis из заголовков)
var lis = document.getElementsByTagName("li");
var outLis = [];
for (var i = 0; i < lis.length; i++) {
if (lis[i].parentNode.parentNode.nodeName.toLowerCase() != "li")
outLis.push(lis[i].getElementsByTagName("span")[0].innerHTML);
}
//рисуем левый столбец
for(var i = 0; i < mas_table.length-1;i++)
{
var new_tr = document.createElement('tr');
var new_td = document.createElement('td');
var textNode = document.createTextNode(outLis[i]);
new_td.appendChild(textNode);
new_tr.appendChild(new_td);
new_table.appendChild(new_tr);
}
//рисуем ТАБЛИЦУ внутри правого столбца. (все LI в одном UL)
for(var k = 0 ;k< 5;k++)
{
var new_td1 = document.createElement('td');
var new_tr1 = document.createElement('tr');
var li2 = document.getElementsByTagName('li')[k+1].innerHTML;
var textNode1 = document.createTextNode(li2);
new_td1.appendChild(textNode1);
new_tr1.appendChild(new_td1);
new_table1.appendChild(new_tr1);
new_tr.appendChild(new_table1);
}
new_table.appendChild(new_tr);
new_div.appendChild(new_table);
parent.appendChild(new_div);
}
ну и вот html который в body
<ul>
<li><span>Level 1 list element</span>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</li>
<li><span>Level 2 list element</span>
<ul>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
</ul>
</li>
<li><span>Level 3 list element</span>
<ul>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</li>
</ul>
