Динамическая Table

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Rjkz, 23 янв 2008.

Наш партнер Genesis Hackspace
  1. Rjkz

    Rjkz Гость

    Здравствуйте. Пожайлуста подскажите можно каким либо оброзом создовать динамические таблицы,
    не используя циклы, и с последуещией кариктеровкой количества строк и столбцов, чтоб можно было даже в середине вставлять и значения все остальные сохранялись? :)
     
  2. Vovochka

    Vovochka Гость

  3. Rjkz

    Rjkz Гость

    Спасибо всем кто отвечал, информация довольно полная и позновательная, так что сообщаю что все кто когда либо будут читать эту тему, смотрите по сылкам , там есть всё что нужно. :)
     
  4. Rjkz

    Rjkz Гость

    Извените но похоже я рано закрыл тему, добовлять в последуюещем строки и столбцы я научился, осталось не решоным как создать таблицу нужной размерности,,? одной функцией без циклов вида

    S='<TR height=3px>';

    for(var i=1; i<=150; i++)
    S+='<TD>';

    for(var k=1; k<=150; k++)
    TS+=S;

    этот способ хоть и быстрее работает чем

    for(var i=1; i<=150; i++)
    {
    S+='<TR>';
    for(var k=1; k<=150; k++)
    {
    S+='<TD>';
    }
    }
    TS=S;
    всеровно не годиться . Подскажите способ :rolleyes:
     
  5. Vovochka

    Vovochka Гость

    Боже мой...
    Ты зачем HTML код своими руками гинеришь??? Надеюсь это только пример и ты так не поступаешь.

    По теме: Если размерность известна. то пиши разверни циклы в код ;-D
    Да зачем тебе отказываться от циклов? Без них же никуда. Объясни.

    Код (Text):
    var tbl = document.createElement('Table');
    tbl.appendChild(document.createElement('tBody'));
    tbody = tbl.tBodies[0];
    for (i=0; i<5; i++) {
    var row = tbody.insertRow(i);
    for (j=0; j<3; j++) {
    var cell = row.insertCell(j);
    }
    }
    document.getElementById('div_with_table').appendChild(tbl);
     
  6. Rjkz

    Rjkz Гость

    Идея выши нормальная чтоб добовлять строки и столбцы insertRow и insertCells , сразу точно сказать не могу надо проверять но можно вроде оптимизировать и будет работать быстрее для больших таблиц на странице,, если делать как цикл в цикле как показанно то получаеться например если таблица пять на пять то это 5*5 получаеться 25 тактов, а если сночало добавить например в цикле пять столбцов а потом пять строк то получаеться 5+5 равно десять тактов, но надо проверять и тот и тот вариант на производительность! а ваши мнения??? :)
     
  7. Vovochka

    Vovochka Гость

    Какие у тебя объёмы. коль ты так гонишься за производительностью? Десятком миллисекунд медленнее/быстрее.
    Но что-то мне и самому стало интересно, насколько манипуляции с DOMом быстрее/медленнее, чем конечный парсинг сгинеренного HTML кода :)

    Будут результаты. поделитесь :)
     
  8. Rjkz

    Rjkz Гость

    Обём таблици хотябы такой как в ЭКСЕЛЕ это одно
    но будет вообще база данных,, динамически подкачиваемая в маленькую таблицу из файла-это другое

    Мини офис под ИЕ! для собственных нужд, а в последующем может и в интернет

    Vovochka то что ты сылки довал на создатели документов в интернет что то вроде того же но не так как у них,,,документы будут сохраняться на компьторе пользователя, просто работать с ними нужно будет с помощью того что я делаю счас :blink: , а занемаюсь я этим просто для своего развлечения,,меня программирование раслобляет,я отдыхаю когда пишу проги и получаеться задуманное :p
     
  9. Vovochka

    Vovochka Гость

    Это конечно хорошо, но почему бы тогда не писать что-нибудь достойное? Зачем извращаться? Офис на JavaScriptе ты не напишешь. конечно получишь пачку експириенса. но время убъешь впустую.
    http://codeby.net/forum/threads/9686.html - Может возмешься? :)
     
  10. Rjkz

    Rjkz Гость

    Здрасте!
    Vovochka
    var tbl = document.createElement('Table'); это что?, а
    var abc = document.createElement('Div'); можно делать?
    может знаеш как мне в функции создать Div назначить ему <style>
    создать на нём табличку нужной размерности а потом с помощью другой функцими показывать и прятать его? а то что ты мне сылку дал я не шарю там , и тема давнишния!
    Нужен масив Div-ов с табличками ну вот ещё мне надо подумать как эти таблички данными заполнять ?? ну подкинть чо нить ещё для размышления :)
     
  11. Vovochka

    Vovochka Гость

    <!--QuoteBegin-Rjkz+5:02:2008, 08:48 -->
    <span class="vbquote">(Rjkz @ 5:02:2008, 08:48 )</span><!--QuoteEBegin-->var tbl = document.createElement('Table'); это что?, а
    var abc = document.createElement('Div'); можно делать?
    [snapback]96635" rel="nofollow" target="_blank[/snapback]​
    [/quote]
    Да, так делать можно. Функция используется для создания любых тегов.
    <!--QuoteBegin-Rjkz+5:02:2008, 08:48 -->
    <span class="vbquote">(Rjkz @ 5:02:2008, 08:48 )</span><!--QuoteEBegin-->может знаеш как мне в функции создать Div назначить ему <style>
    [snapback]96635" rel="nofollow" target="_blank[/snapback]​
    [/quote]
    Код (Text):
    var div = document.createElement('DIV');
    div.className = 'my_class'; // Назначаем элементу CSS класс
    div.style.display = 'none'; // Скрываем элемент через стили.
    <!--QuoteBegin-Rjkz+5:02:2008, 08:48 -->
    <span class="vbquote">(Rjkz @ 5:02:2008, 08:48 )</span><!--QuoteEBegin-->ну подкинть чо нить ещё для размышления smile.gif
    [snapback]96635" rel="nofollow" target="_blank[/snapback]​
    [/quote]
    1) google: javascript DOM
    2) Может стоит выбрать фреймворк? Prototype, jQuery, mootools
     
  12. Rjkz

    Rjkz Гость

    {
    var div = document.createElement('DIV');

    div.style.position = 'absolute';
    div.style.zindex = '1';
    div.style.padding = '3';
    div.style.FontSize = '2pt';
    div.style.pixelLeft = '0';
    div.style.pixelTop = '0' ;
    div.style.width = '100';
    div.style.height = '100';
    div.style.backgroundColor = 'Red';

    document.appendChild(div);

    div.innerHTML = 'Hello Word';

    div.style.display='block';

    }

    и не чего??
     
  13. Vovochka

    Vovochka Гость

    document.appendChild(div);

    Ну зачем сразу спрашивать? Почему не посмотреть на ошибки. которые выдает браузер?
     
  14. Rjkz

    Rjkz Гость

    код который я выши напичатал у меня работает без ошибок и броузер не чего не пишит ,,только и и панельки не появляеться,,ну исправте как там нужно имеенно в том коде что работало :)
     
  15. Sandr

    Sandr Гость

    Вам же сказали выше, что у документа нет метода appendChild...

    Надо так:

    document.body.appendChild(div);
     
  16. Rjkz

    Rjkz Гость

    function Create_Div()
    {
    var div = document.createElement('DIV');

    div.style.display='block';

    div.style.position = 'absolute';
    div.style.zindex = '1';
    div.style.padding = '3';
    div.style.FontSize = '2pt';
    div.style.pixelLeft = '100';
    div.style.pixelTop = '100' ;
    div.style.width = '100';
    div.style.height = '100';
    div.style.backgroundColor = 'Red';

    document.body.appendChild(div);
    div.innerHTML = 'Hello Word Pipl';
    }

    Рабочая функция !

    интересно если так сделать B) :blink:
    код поместить в одельный файл name.js ,а
    var вынести за пределы функции

    <script>

    var div = new createArray(); ? не знаю обезательно здесь количество в скобках указывать ?
    k=0; ? без индекса в скобках будет масив динамическим ?

    function Create_Div()
    {
    document.createElement('DIV');

    div[k].style.display='block';

    div[k].style.position = 'absolute';
    div[k].style.zindex = '1';
    div[k].style.padding = '3';
    div[k].style.FontSize = '2pt';
    div[k].style.pixelLeft = '100';
    div[k].style.pixelTop = '100' ;
    div[k].style.width = '100';
    div[k].style.height = '100';
    div[k].style.backgroundColor = 'Red';

    document.body.appendChild(div[k]);
    div.innerHTML = 'Hello Word Pipl';
    k++
    }

    function GetZIndex(i)
    {
    return div.style.zindex вернёт Zindex Div-а по индексу, а если не сущиствует с таким индексом?
    }
    </script>

    Подскажите кто сталкивался ??? ;)

    Извените -Sory
    строчку не правильно записал
    div[k] = document.createElement('DIV')
     
  17. Rjkz

    Rjkz Гость

    Для: sax_ol
    я не пойму как соответсвенно код нудно оформлять?
     
  18. Rjkz

    Rjkz Гость

    Для: Vovochka
    и кто следит за темой.

    Возращаясь к теме 5 х 5 = 25 или 5 + 5 =10 попробывал на том что у меня уже было написано придлогаю оценить самому только не запускай одновременно лучше по очереди а то система повиснуть может в обеих вариантах создаю таблички 100 х 100 , сразу скажу 200 х 500 у меня на компе уже не создалась не хватило памяти (виртуальной) :D , ну вот собственно сылки

    http://nik-we.narod.ru/stable.html :blink: VS B) http://nik-we.narod.ru/table.html

    Помогите ещё вот с этим разобраться

    Код (Text):
    var x=100; y=100;
    var div;

    //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    //------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    function Create_Div()
    {
    div = document.createElement('DIV');

    div.style.display='block';
    x=x+10;
    y=y+10;
    div.style.position = 'absolute';         
    div.style.zindex = '1';                    
    div.style.padding = '3';                     
    div.style.FontSize = '2pt';            
    div.style.pixelLeft = x;             
    div.style.pixelTop = y;          
    div.style.width = '100';                     
    div.style.height = '100';                    
    div.style.backgroundColor = 'Red'; 

    div.style.filter='alpha(opacity=30)';


    document.body.appendChild(div);  
    div.innerHTML = 'Hello Word Pipl';
    }


    function Destroy_Div()
    {
    document.body.removeChild("div");
    }
    document.body.removeChild("div") - вот здесь мне надо знать ID который я не задаю и не как не могу получить каким либо способом ,, при многократном вызове function Create_Div() создаёться много дивов, а function Destroy_Div() удаляеться только последний созданный! надо решить проблему потому что когда я буду на DIV вешать TABLE мне тоже ID будут нужны таблици и ячеек для создания обработчика клика по ячейкам.

    http://nik-we.narod.ru/table.html клики по ячейкам обработываться

    http://nik-we.narod.ru/stable.html уже не обрабатываються !! С Уважением Коля! ;)
     
  19. Vovochka

    Vovochka Гость

    Чтобы отчистить тег от всего, что в нем есть существует два способа:
    Лёгкий: document.getElementById('some_container').innerHTML = "";
    и путь для мачо. которых не пугает DOM:
    Код (Text):
    var c = document.getElementById('some_container');
    while (c.firstChild) c.removeChild(c.firstChild);
    В привиденных тобою примерах я не заметил разницы, которую хотел бы увидеть, а именно создание таблицы через DOM.

    + Результат работы скрипта я смог увидить лишь через DOM inspector. ибо визуально я его так и не увидел.
    На всякий случай повторю. Сижу под линухом и IE не имею.
     
  20. Rjkz

    Rjkz Гость

    да я спрашивал честно говря про ID и как его узнать , а не то как очистить тег,,,как очистить я знаю,,лиж бы знать ID шку ,,а как её назначать в моём примере не подскажите?? :)
     
Загрузка...

Поделиться этой страницей