Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как через appendChild правельно распечатоть эле...


Автор: Mushu 25.6.2007, 15:07
Как через appendChild правильно распечатать элементы. Я их делаю в цикле, как реализовать чтоб они накапливались в массиве а потом их всех разом (точнее) через цикол распечатоть в  html
Код


html>
<body>
<form>
<div id="podst"></div>

<script>




var q = new Array();
    
    
            q[0] = new Object();
            q[0].name_teg = "select";
            q[0].id = 2;
            q[0].name = "Imya";
            q[0].text = "!!!!!";
            
            
            q[1] = new Object();
            q[1].name_teg = "option";
            q[1].value = 1;
            q[1].text = "Imya-1";
            
            q[2] = new Object();
            q[2].name_teg = "option";
            q[2].value = 1;
            q[2].text = "Imya-2";


                        q[3] = new Object();
            q[3].name_teg = "select";
            q[3].id = 2;
            q[3].name = "Imya";
            q[3].text = "!!!!!";
            
            
            q[4] = new Object();
            q[4].name_teg = "option";
            q[4].value = 1;
            q[4].text = "Imya-1";
            
            q[5] = new Object();
            q[5].name_teg = "option";
            q[5].value = 1;
            q[5].text = "Imya-2";
                         
                       

                    
            
        var mas_element = new Array();    
        for(var i=0; i<q.length; i++)
        {    
        if (q[i].name_teg == "select")
            {
                mas_element[i] =document.createElement("SELECT");
                mas_element[i].name = q[i].name_teg;
                mas_element[i].id = q[i].id;
                mas_element[i].classes = q[i].classes;
                mas_element[i].value = q[i].value
                mas_element[i].text  =q[i].text;
                document.getElementById("podst").appendChild(element_select); //?????????????????
            }
        
        if (q[i].name_teg == "option")
            {
                var months =document.createElement("OPTION");
                months.name = q[i].name_teg;
                months.id = q[i].id;
                months.classes = q[i].classes;
                months.value = q[i].value
                months.text  =q[i].text;
                document.getElementById("podst").appendChild(months); //???????
            }
            
            
        
        }

alert(document.getElementById('podst').innerHTML);
</script>
</form>
</body>
</html>

Автор: ksnk 25.6.2007, 15:37
Открою несколько страшных секретов!
  • Записи 
    Код

    var q = new Array();
               q[0] = new Object();
                q[0].name_teg = "select";
                q[0].id = 2;
                q[0].name = "Imya";
                q[0].text = "!!!!!";
                
                
                q[1] = new Object();
                q[1].name_teg = "option";
                q[1].value = 1;
                q[1].text = "Imya-1";
    ...

    и 
    Код

    var q=[{name_teg:'select',id:2,name:'Imya',text:'!!!'},
                {name_teg:'option',value:1,text:'Imya-1'},
    ...
              ]
     порождают АБСОЛЮТНО одинаковые структуры данных. А вторая еще короче и быстрее.
  •  элемент option должен вставляться в элемент select
Итого код может выглядеть, к примеру так
Код

... // определение q
        var select = null;    
        for(var i=0; i<q.length; i++)
        {    
        switch(q[i].name_teg){
        case 'select':
                var e=document.createElement("SELECT");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                select=document.getElementById("podst").appendChild(e); //?????????????????
                break;        
        
        case"option":
                var e =document.createElement("OPTION");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                if(select)select.appendChild(months); //???????
                break;
       }}

Зачем нужен mas_element, осталось для меня не понятно...

Автор: dstorm81 25.6.2007, 15:38
вижу знакомые куски кода...
расскажи что сделать хочешь, мож что готовое посоветуем

Автор: Mushu 25.6.2007, 16:04
угу мне приходит массив в джавускрипт готовых элементов с со значеними(атрибутами) и я хочу реализовать на джавескрипте парссер который парсил все это в html вот

Добавлено через 2 минуты и 8 секунд
Цитата(ksnk @ 25.6.2007,  15:37)
Открою несколько страшных секретов!


  • Записи 
    Код

    var q = new Array();
               q[0] = new Object();
                q[0].name_teg = "select";
                q[0].id = 2;
                q[0].name = "Imya";
                q[0].text = "!!!!!";
                
                
                q[1] = new Object();
                q[1].name_teg = "option";
                q[1].value = 1;
                q[1].text = "Imya-1";
    ...

    и 
    Код

    var q=[{name_teg:'select',id:2,name:'Imya',text:'!!!'},
                {name_teg:'option',value:1,text:'Imya-1'},
    ...
              ]
     порождают АБСОЛЮТНО одинаковые структуры данных. А вторая еще короче и быстрее.

  •  элемент option должен вставляться в элемент select

Итого код может выглядеть, к примеру так
Код

... // определение q
        var select = null;    
        for(var i=0; i<q.length; i++)
        {    
        switch(q[i].name_teg){
        case 'select':
                var e=document.createElement("SELECT");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                select=document.getElementById("podst").appendChild(e); //?????????????????
                break;        
        
        case"option":
                var e =document.createElement("OPTION");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                if(select)select.appendChild(months); //???????
                break;
       }}

Зачем нужен mas_element, осталось для меня не понятно...

А как вложить OPTION в SELECT..?

Добавлено через 8 минут и 2 секунды
Точнее q[2] не входит в Select

Код

var q = new Array();
    
    
            q[0] = new Object();
            q[0].name_teg = "select";
            q[0].id = 2;
            q[0].name = "Imya";
            q[0].text = "!!!!!";
            
            
            q[1] = new Object();
            q[1].name_teg = "option";
            q[1].value = 1;
            q[1].text = "Imya-1";
            
            q[2] = new Object();
            q[2].name_teg = "option";
            q[2].value = 1;
            q[2].text = "Imya-2";
                    

   var select = null;    
        for(var i=0; i<q.length; i++)
        {    
        switch(q[i].name_teg){
        case 'select':
                var e=document.createElement("SELECT");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                select=document.getElementById("podst").appendChild(e); //?????????????????
                break;        
        
        case"option":
                var e =document.createElement("OPTION");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                if(select)select.appendChild(e); //???????
                break;
       }}
        
document.getElementById("podst").appendChild(e);
alert(document.getElementById('podst').innerHTML);


Автор: ksnk 25.6.2007, 16:20
Нужно выкинуть предпоследнюю строчку:
document.getElementById("podst").appendChild(e);

Автор: Alx 26.6.2007, 00:14
http://forum.vingrad.ru/forum/topic-151005/kw-select-ajax-option-%D0%B0%D0%B2%D1%82%D0%BE%D0%BF%D0%BE%D0%B4%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD.html

Автор: Mushu 26.6.2007, 08:21
Цитата(Alx @ 26.6.2007,  00:14)
http://forum.vingrad.ru/forum/topic-151005/kw-select-ajax-option-%D0%B0%D0%B2%D1%82%D0%BE%D0%BF%D0%BE%D0%B4%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD.html

Спасибо за сылку изучим для расширения кругозора, а  в моей задаче я нааборот ушол от хмл (в сторону меньшего обьема передачи данных) и библиотеку для аджакса использую JsHttpRequest

Добавлено @ 08:29
У меня в IE не работает выше преведенный пример в чем проблема..? Создаеться тока селект без списка.. :(
 
Код


<html>
<body>
<form>
<div id="podst"></div>

<script>
var q = new Array();
    
    
            q[0] = new Object();
            q[0].name_teg = "select";
            q[0].id = 2;
            q[0].name = "Imya";
            q[0].text = "!!!!!";
            
            
            q[1] = new Object();
            q[1].name_teg = "option";
            q[1].value = 1;
            q[1].text = "Imya-1";
            
            q[2] = new Object();
            q[2].name_teg = "option";
            q[2].value = 1;
            q[2].text = "Imya-2";
            
            
            

   var select = null;    
        for(var i=0; i<q.length; i++)
        {    
        switch(q[i].name_teg){
        case 'select':
                var e=document.createElement("SELECT");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                select=document.getElementById("podst").appendChild(e); //?????????????????
                break;        
        
        case'option':
                var e =document.createElement("OPTION");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text;
                if(select)select.appendChild(e); //???????
                break;
       }}
        

alert(document.getElementById('podst').innerHTML);










</script>
</form>
</body>
</html>

Автор: ksnk 26.6.2007, 09:45
Можно переписать кусок кода вот так.
Код

                var e =document.createElement("OPTION");
                e.name = q[i].name_teg;
                e.id = q[i].id;
                e.classes = q[i].classes;
                e.value = q[i].value
                e.text  =q[i].text; 
                if(select)           
                try {e=select.add(e, null) } //standards compliant; doesn't work in IE
                catch(ex) {
                   e=select.add(e,select.options.length); // IE only
               }
               e=null
                break;

Еще следует знать, что атрибут, задающий имя класса называется className, а не classes , атрибута text нет у select'а и вообще, почитать документацию не мешает...

Автор: Mushu 26.6.2007, 09:50
знаю я (учусь) эксперементировал, такой подход мне не подходит, скажите тогда как мне организовать контейнер, куда можно будет складывать все элементы а потом его распечатать?
 

Автор: Alx 26.6.2007, 10:38
Цитата(Mushu @  26.6.2007,  08:21 Найти цитируемый пост)
а  в моей задаче я нааборот ушол от хмл (в сторону меньшего обьема передачи данных)

наряду с XML там поддерживается и http://json.org-передача данных в AJAX-запросах, т.е. возможный объем передаваемых данных сведен до минимума. Вы также можете подгружать/генерировать эти данные как Вам удобно, самостоятельно или с помощью встроенных функций loadOptions_*, а потом просто передавать их в функцию 
Код

id_списка.appendOptions(JSON-строка)

всё остальное программа сделает за вас - проще некуда.. ;)

http://alx.vingrad.ru/fwc/ru/smartselect#doc-ajax - чуть подробнее
http://alx.vingrad.ru/fwc/smartselect/offset_examples/sselect.php - примеры с JSON и XML подгрузкой

Автор: Mushu 27.6.2007, 13:35
это все хорошо, так мне не кто ни не ответил как обработанные формы складывать в массив..? 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)