Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Justin

Justin Avatar
:)

****
Senior Member

256


July 2009
;D, well i finally learned how to create pm bars, but i want to go a little more advanced, i think it's time :). in this thread Wrighty mentioned something about making tables with DOM ( ???) but said it's a little more advanced so i skipped it.

But now i think im ready to learn how to make tables with DOM, can anyone teach me? :P *cough*thecodingmasterchris*cough* :)
My signature
[/left][/i][/size]

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
I'm surprised we have no tutorial on it. :P I don't want to go into too much detail right now, but here's a brief summary of a few functions you'll need to know for dealing with creating tables via DOM methods:

appendChild
insertBefore
document.createElement
cloneNode
insertRow
insertCell

Basically, I'll try to summarize them briefly here for you... won't go into too much depth, sorry.


PARENT.appendChild(CHILDNODE)
That'll add a childnode to the END of the parent node.


ELEMENT.parentNode.insertBefore(NEWNODE, ELEMENT)
This will insert NEWNODE before ELEMENT


document.createElement("div")
That'd create a new DIV node that you can assign to a variable. Then you could edit properties, append, insert before something, etc.


NODE.cloneNode(true);
I can't remember the EXACT differences between true and false, but this basically clones NODE and returns it so you can put it in a variable or something. The true vs false involves copying properties and child nodes. I don't want to give specifics because I can't remember exact details. :P Just look it up on MozDev

TABLE.insertRow(POS);
ROW.insertCell(POS);
Just read this: forum.sz-ex.com/index.cgi?action=display&board=codetuts&thread=2068


More on appendChild and insertBefore: forum.sz-ex.com/index.cgi?action=display&board=codetuts&thread=2087


Hopefully that'll help you figure it out. >.< I'll try to write a tutorial sometime in the future on it. Also, I find it -very- helpful to learn by dissection of other codes, so try looking at these by me:
forum.sz-ex.com/index.cgi?board=codes&action=display&thread=1357
forum.sz-ex.com/index.cgi?board=codes&action=display&thread=1511
forum.sz-ex.com/index.cgi?board=codes&action=display&thread=11639

Justin

Justin Avatar
:)

****
Senior Member

256


July 2009
Chris Avatar
I'm surprised we have no tutorial on it. :P I don't want to go into too much detail right now, but here's a brief summary of a few functions you'll need to know for dealing with creating tables via DOM methods:

appendChild
insertBefore
document.createElement
cloneNode
insertRow
insertCell

Basically, I'll try to summarize them briefly here for you... won't go into too much depth, sorry.


PARENT.appendChild(CHILDNODE)
That'll add a childnode to the END of the parent node.


ELEMENT.parentNode.insertBefore(NEWNODE, ELEMENT)
This will insert NEWNODE before ELEMENT


document.createElement("div")
That'd create a new DIV node that you can assign to a variable. Then you could edit properties, append, insert before something, etc.


NODE.cloneNode(true);
I can't remember the EXACT differences between true and false, but this basically clones NODE and returns it so you can put it in a variable or something. The true vs false involves copying properties and child nodes. I don't want to give specifics because I can't remember exact details. :P Just look it up on MozDev

TABLE.insertRow(POS);
ROW.insertCell(POS);
Just read this: forum.sz-ex.com/index.cgi?action=display&board=codetuts&thread=2068


More on appendChild and insertBefore: forum.sz-ex.com/index.cgi?action=display&board=codetuts&thread=2087


Hopefully that'll help you figure it out. >.< I'll try to write a tutorial sometime in the future on it. Also, I find it -very- helpful to learn by dissection of other codes, so try looking at these by me:
forum.sz-ex.com/index.cgi?board=codes&action=display&thread=1357
forum.sz-ex.com/index.cgi?board=codes&action=display&thread=1511
forum.sz-ex.com/index.cgi?board=codes&action=display&thread=11639


Thanks so much chris, i will start trying this after the holidays :) +1 karma
My signature
[/left][/i][/size]

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
No problem. Just post back if you get stuck at all. :) I'm not the only one here who can help.

newBookmarkLockedFalling