VPF::Динамическое формирование таблици

Castro

Дата 3.10.2007, 10:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

Хотел у многоуважаемых гуру JS совета спросить.
Есть задача выводить данные вдинамически сгерерированую таблицу.
Всё что мног нарыть это http://forum.vingrad.ru/forum/topic-86102/unread-1.html.
Но точно помню что был где-то на сайте пример где таблица как-то циклами формируется.
Как это сделать? smile

И второй вопрос касательно хранения данных, которые будут выводится в эту таблицу.
Это одна строка, сшиваемая с нескольких.
Пример: 1.*Поиск А в Б.* Должно найти 2 строки. Найдено *2. (* - просто разделитель)
1. Номер
2.Строка 1
3.Строка 2
4.Результат возвращённый скриптом

Тоесть это 4 элемента. Причём последний -это результат выполнения скрипта, предпоследний - ожидаемый результат.
Как хранить такое? Возможно создать такой объект, ну или в массиве хранить?
С уважением

P.S. На данном этапе храню это так:

Код


<script>
t[0]='<b>'+'Количество ID=myID в линках'+'</b>'+' '+'. Должно вернуть 1. Вернуло: '+'<span class="red">'+refu.getElementCount(document,'link','myID1','id')+'</span>';</script>

Это сообщение отредактировал(а) Castro - 3.10.2007, 10:48

--------------------

Pokoinik

Дата 3.10.2007, 11:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 283
Регистрация: 17.3.2007
Где: /dev/null

Репутация: 1
Всего: 3

опиши пожалуйсто подробнее данные которые ты собираешься хранить..
а таблицу генерить можно так:

Код


<script>
var table = '<table border=1>'
for(var i = 0;i<10;i++) {
    var line = '<tr>';
    for(var j=0;j<100;j++) {
        line += "<td>"+j+"</td>";
    }
    line += '</tr>';
    table += line
}
table += '</table>'
document.write(table);
</script>

--------------------

ICQ: 490-993
Существует только 10 типов людей: те, которые понимают двоичную систему, и которые ее не понимают!!!
Опасайтесь людей верующих, ибо у них есть боги, которые им все прощают.

Делай или не делай! Никаких попробую!
Йода (Yoda), мастер-джедай

Castro

Дата 3.10.2007, 11:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

Значит так. Первый элемент - это описание просто(текст задаётся руками). 2-й - тоже текст(у меня это ожидаемое значение,тоже задаётся руками при заполнении массива).
3-й - это функция (как у меня refu.getElementCount(document,'link','myID1','id')), результат выполнения которой должен выводится в ячейку таблицы .
Вот и вся строка. Каждый элемент в отдельной ячейке должен хранится и ну и выводится с 1го по 3й в строке таблицы.
Что скажешь?

--------------------

Astraller

Дата 3.10.2007, 11:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 2
Всего: 5

Цитата(Pokoinik @ 3.10.2007, 11:15)

Код


<script>
var table = '<table border=1>'
for(var i = 0;i<10;i++) {
    var line = '<tr>';
    for(var j=0;j<100;j++) {
        line += "<td>"+j+"</td>";
    }
    line += '</tr>';
    table += line
}
table += '</table>'
document.write(table);
</script>

1) Будет работать только при загрузке страницы smile

2) Под IE тестили?

PS Лучше DOM.

Код


td=document.createElement("td");
td.innerHTML="Йа табличко";
tr=document.createElement("tr");
tbody=document.createElement("tbody");
table=document.createElement("table");
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
document.body.appendChild(table);

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

Castro

Дата 3.10.2007, 12:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

А поподробнее? Как создать скажем таблицу 2х2 с текстовыми узлами внутри? Циклами желательно ибо много будет строк

Это сообщение отредактировал(а) Castro - 3.10.2007, 12:10

--------------------

SelenIT

Дата 3.10.2007, 12:11 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Castro,

Цитата(Castro @ 3.10.2007, 10:46

)

На данном этапе храню это так...

Раз все равно храните в виде фрагмента HTML, почему бы сразу не строить строку таблицы?

Код


t[0]='<tr><td>0</td><td>'+'Количество ID=myID в линках'+'</td>'+
        '<td>Должно вернуть 1. Вернуло: '+'</td>'+
        '<td>' + refu.getElementCount(document,'link','myID1','id')+'</td></tr>';

Тогда вывод будет элементарным:

Код


something.innerHTML = '<table>' + t.join('') + '</table>';

Хотя правильнее, конечно, хранить "голые" данные отдельно от представления. Но если, кроме как в эту таблицу, они больше никуда не выводятся - можно и так.

Astraller,
А что не так в IE с этим примером (при условии п.1, конечно)?

Цитата(Astraller @ 3.10.2007, 11:57

)

Лучше DOM

Лучше идеологически, но, увы, не быстрее.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Castro

Дата 3.10.2007, 12:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

В том то и дело что хочется хранить голые данные не зависимо от их отображения. К тому же сам массив данных будет формироваться в другом скрипте. Поэтому мне пока что нужно написать именно сам вывод в таблицу ну и постараться придумать как хранить данные -в массиве или объекте.
Нашёл что-то типа

Код


<script>
function createTable(){
   var counter2 = 0;
   var getIDs = document.getElementById("testremover");  
   if(!getIDs){
    var getIDTest = document.getElementById("test");
    var crtID = document.createElement("tbody");
    crtID.id = "testremover";
    getIDTest.appendChild(crtID); 
    getIDs = document.getElementById("testremover");
   }    

  //Создав &lttbody> и присвоив ему указанный id 
  //(безусловно, имя id может быть любым), 
  //мы уже создали остов нашей таблицы.

  for(var counter=0; counter<=5; counter++){ 
   var crtTr = document.createElement("tr");  

  //Первый цикл определяет количество строк, 
  //после него указана только одна переменная, 
  //она создает элемент "tr", в который будет добавлена 
  //информация из следующего цикла.

   for(var count=0; count<=3; count++){ 

  //Логическое условие второго цикла представляет 
  //собой количество аргументов массива, 
  //проще говоря количество его столбцов. 

    counter2++;
    var crtTd = document.createElement("td"); 
    if(counter2 == 1){
     var crtTxtNd = document.createTextNode('fuck');
    }  
    else if(counter2 == 2){
     var crtTxtNd = document.createTextNode('you');
    }
    else if(counter2 == 3){
     var crtTxtNd = document.createTextNode('bitch');
     }
     else{
     var crtTxtNd = document.createTextNode('НАХ');
     counter2 = 0;
    }
    crtTd.appendChild(crtTxtNd);
    crtTr.appendChild(crtTd);
    getIDs.appendChild(crtTr);
   }
  }
 }
</script>

Уже более похоже

Это сообщение отредактировал(а) Castro - 3.10.2007, 12:22

--------------------

SelenIT

Дата 3.10.2007, 12:29 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Все равно. Имхо, нагляднее всего - массив объектов:

Код


var t = [
   { subject: 'Количество ID=myID в линках', expected: 1, actual: refu.getElementCount(document,'link','myID1','id') },
   { subject: 'Количество ID=myID в имиджах', expected: 1, actual: refu.getElementCount(document,'image','myID1','id') },
   ...
]

И вывод опять же через innerHTML:

Код


var out = '<table>';
for (var i=0; i<t.length; i++) {
     out += '<tr><td>'+(i+1)+'</td><td>'+t[i].subject+'</td><td>'+t[i].expected+'</td><td>'+t[i].actual+'</td></tr>'
}
something.innerHTML = out + '</table>';

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Castro

Дата 3.10.2007, 12:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

SelenIT, спасибо за решение-очень интересно и думаю как раз то, что нужно. Не подскажете где на русском можно про массивы объектов почитать?

--------------------

SelenIT

Дата 3.10.2007, 12:50 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Castro, а чего про них читать? JS - язык гибкий, элементами массива и свойствами объекта в нем может быть что угодно (хоть хоть объект, хоть массив, хоть функция), комбинируйте их как Вам угодно. Имхо, относительно неплохо написано здесь.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Astraller

Дата 3.10.2007, 13:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 300
Регистрация: 1.8.2007
Где: $Украина[Кры м]->Феодосия

Репутация: 2
Всего: 5

Цитата(SelenIT @ 3.10.2007, 12:11)

Astraller,
А что не так в IE с этим примером (при условии п.1, конечно)?

Цитата(Astraller @ 3.10.2007, 11:57

)

Лучше DOM

Лучше идеологически, но, увы, не быстрее.

Собственно вы правы при document.write ничего. А вот при вставке новый строк посредством innerHTML/insertAdjacentHTML будут проблемы.

Хм. Спасибо за полезную информацию. Никогда бы не подумал что DOM работает медленнее :(

--------------------

A.S.T.R.A.L.L.E.R.: Artificial Synthetic Technician Responsible for Assassination, Logical Learning and Efficient Repair

SelenIT

Дата 3.10.2007, 13:23 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Цитата(Astraller @ 3.10.2007, 13:19

)

при вставке новый строк посредством innerHTML/insertAdjacentHTML будут проблемы

Это верно, по частям работать с innerHTML таблицы IE не любит. Но если вставлять целую таблицу, все будет нормально.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Castro

Дата 3.10.2007, 13:54 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

Попутный вопрос: я хочу сравнивать переменые expected и actual. Теоретически expected может быть и строкой, как и actual, всё зависит от того что в объект внесли. Как мне проверять равнЫ ли эти 2 переменные? Преобразовать как-то в string? Как?Или может при инифиализации массива задать тип конкретных элементов?

--------------------

Castro

Дата 3.10.2007, 16:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

Писал так

Код


<script>
function crtTable()
    {
    var refu=new RegExpFormUtils();
    something=document.getElementById('log');
    var t = [
       { subject: 'Количество ID=myID в линках', expected: 1, actual: refu.getElementCount(document,'link','myID1','id') },
       { subject: 'Количество link=http://site.com/2.html в линках', expected: 2, actual: refu.getElementCount(document,'link','http://site.com/2.html','href') },

       { subject: 'Количество name=a2 в якорях', expected: 3, actual: refu.getElementCount(document,'anchor','a2','name') },

       { subject: 'Количество src=http://site.com/1.gif в картинках', expected: 1, actual: refu.getElementCount(document,'image','http://site.com/1.gif','src') },

       { subject: 'Количество name=name1 в type=text', expected: 2, actual: refu.getElementCount(document,'text','name1','name') },

       { subject: 'Количество id=my2 в type=text', expected: 1, actual: refu.getElementCount(document,'text','my2','id') },

       { subject: 'Количество href. Обрезает линки типа javascript', expected: 0, actual: refu.getElementCount(document,'link','javascript.*','href') },

       { subject: 'Количество name=r1 в type=radio', expected: 2, actual: refu.getElementCount(document,'radio','r1','name') },

       { subject: 'Количество name=b1 в type=button', expected: 1, actual: refu.getElementCount(document,'button','b1','name') },

       { subject: 'Количество value= в type=button', expected: 0, actual: refu.getElementCount(document,'button','test_button2','value') },

       { subject: 'Количество src=http://site.com/ в картинках', expected: 4, actual: refu.getElementCount(document,'image','http://site.com/','src') }
        ]
        var out = '<table id="logTable">';
        for (var i=0; i<t.length; i++) {
            var style="white";
            if(i==0){
            out+='<tr><th>№</th><th>Description</th><th>Expected result</th><th>Returned result</th></tr>';
            }
            var a=parseInt(t[i].expected);
            var b=parseInt(t[i].actual);
            if(a!==b)
            {
                style="red";
            }
            out += '<tr><td class="idTd">'+(i+1)+'</td><td class="description">'+t[i].subject+'</td><td class="expRes">'
            +t[i].expected+'</td><td class="'+style+'">'+t[i].actual+'</td></tr>';
        }
    something.innerHTML = out + '</table>';
    }
</script>

И было мне щастье. Но теперь нужно вынести массив за пределы функции или лучше вообще в другой файл. Теперь функция имеет вид

Код


<script>
var refu=new RegExpFormUtils();
var t = [
       { subject: 'Количество ID=myID в линках', expected: 1, actual: refu.getElementCount(document,'link','myID1','id') },
       { subject: 'Количество link=http://site.com/2.html в линках', expected: 2, actual: refu.getElementCount(document,'link','http://site.com/2.html','href') },

       { subject: 'Количество name=a2 в якорях', expected: 3, actual: refu.getElementCount(document,'anchor','a2','name') },

       { subject: 'Количество src=http://site.com/1.gif в картинках', expected: 1, actual: refu.getElementCount(document,'image','http://site.com/1.gif','src') },

       { subject: 'Количество name=name1 в type=text', expected: 2, actual: refu.getElementCount(document,'text','name1','name') },

       { subject: 'Количество id=my2 в type=text', expected: 1, actual: refu.getElementCount(document,'text','my2','id') },

       { subject: 'Количество href. Обрезает линки типа javascript', expected: 0, actual: refu.getElementCount(document,'link','javascript.*','href') },

       { subject: 'Количество name=r1 в type=radio', expected: 2, actual: refu.getElementCount(document,'radio','r1','name') },

       { subject: 'Количество name=b1 в type=button', expected: 1, actual: refu.getElementCount(document,'button','b1','name') },

       { subject: 'Количество value= в type=button', expected: 0, actual: refu.getElementCount(document,'button','test_button2','value') },

       { subject: 'Количество src=http://site.com/ в картинках', expected: 4, actual: refu.getElementCount(document,'image','http://site.com/','src') }
        ];
function crtTable()
    {
    
    something=document.getElementById('log');
    
        var out = '<table id="logTable">';
        for (var i=0; i<t.length; i++) {
            var style="white";
            if(i==0){
            out+='<tr><th>№</th><th>Description</th><th>Expected result</th><th>Returned result</th></tr>';
            }
            var a=parseInt(t[i].expected);
            var b=parseInt(t[i].actual);
            if(a!==b)
            {
                style="red";
            }
            out += '<tr><td class="idTd">'+(i+1)+'</td><td class="description">'+t[i].subject+'</td><td class="expRes">'
            +t[i].expected+'</td><td class="'+style+'">'+t[i].actual+'</td></tr>';
        }
    something.innerHTML = out + '</table>';
    }
</script>

и столбец actual: выдаёт только нули. Почему?Что не так?

--------------------

SelenIT

Дата 3.10.2007, 18:49 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Видимо, потому что заполнение массива t происходит до полной загрузки страницы, когда, естественно, body пуст и не содержит ничего из искомого. Предлагаю превратить его в функцию:

Код


function t() {
      return [
          { subject: 'Количество ID=myID в линках', expected: 1, actual: refu.getElementCount(document,'link','myID1','id') },
          // и т.д. без изменений
      ]
}

и внутри функции crtTable() вызывать ее: var t = t().

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »