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

  • Автор темы Rjkz
  • Дата начала
R

Rjkz

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

Rjkz

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

Rjkz

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

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:
 
V

Vovochka

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

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

Код:
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);
 
R

Rjkz

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

Vovochka

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

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

Rjkz

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

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

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

Vovochka

#9
Это конечно хорошо, но почему бы тогда не писать что-нибудь достойное? Зачем извращаться? Офис на JavaScriptе ты не напишешь. конечно получишь пачку експириенса. но время убъешь впустую.
http://codeby.net/forum/threads/9686.html - Может возмешься? :)
 
R
#10
Здрасте!
Vovochka
var tbl = document.createElement('Table'); это что?, а
var abc = document.createElement('Div'); можно делать?
может знаеш как мне в функции создать Div назначить ему <style>
создать на нём табличку нужной размерности а потом с помощью другой функцими показывать и прятать его? а то что ты мне сылку дал я не шарю там , и тема давнишния!
Нужен масив Div-ов с табличками ну вот ещё мне надо подумать как эти таблички данными заполнять ?? ну подкинть чо нить ещё для размышления :)
 
V

Vovochka

#11
<!--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]
Код:
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
 
R
#12
{
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';

}

и не чего??
 
V

Vovochka

#13
document.appendChild(div);

Ну зачем сразу спрашивать? Почему не посмотреть на ошибки. которые выдает браузер?
 
R
#14
код который я выши напичатал у меня работает без ошибок и броузер не чего не пишит ,,только и и панельки не появляеться,,ну исправте как там нужно имеенно в том коде что работало :)
 
S

Sandr

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

Надо так:

document.body.appendChild(div);
 
R
#16
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')
 
R
#17
Для: sax_ol
я не пойму как соответсвенно код нудно оформлять?
 
R
#18
Для: 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

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

Код:
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 уже не обрабатываються !! С Уважением Коля! ;)
 
V

Vovochka

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

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