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

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

  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 шку ,,а как её назначать в моём примере не подскажите?? :)
     
Загрузка...

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