Modifying HTML Table through DOM

[Jeff J.]

The basic concept is a music playlist that I'm trying to write as a
table inside a div.

I have Song and Playlist 'classes'. The Song class has a Write()
method, as does the Playlist.

The Song.Write() boils down to this:
var tr = document.create Element("TR");
var td = document.create Element("TD");
tr.id = this.ID;
tr.appendChild( td);
td.innerText = this.Artist + ' - ' + this.Title;
td.onclick = function() {top.playSong(t his.parentEleme nt.id);}
return tr;

The Playlist.Write( ) call is essentially this:
// this.songs is an Array of Song objects
for (var x = 0; x < this.songs.leng th; x++) {
playlistTable.a ppendChild(this .songs[x].Write());
}

When I attempt to call playlistTable.a ppendChild() after creating the
table via document.create Element("Table" ), everything works fine,
except I have no way to add the table to my document, since the div I
want it in won't believe that appendChild() is a valid method. If I
put the table in the div as a <TABLE>, and then try to append to that,
the *table* doesn't accept appendChild() as valid. Specifically, I get
an 'Invalid argument' error when calling either.

If anyone has ideas on what I'm missing, or where I screwed up, I
would be most grateful. :)

TIA

~ Jeff

[kaeli]

Re: Modifying HTML Table through DOM

In article <f2309d88.03082 81639.3dd0760e@ posting.google. com>, jpj625
@earthlink.net enlightened us with...[color=blue]
>
> When I attempt to call playlistTable.a ppendChild() after creating the
> table via document.create Element("Table" ), everything works fine,
> except I have no way to add the table to my document, since the div I
> want it in won't believe that appendChild() is a valid method.[/color]

Something's wrong. It should. Full code online anywhere?
[color=blue]
> If I
> put the table in the div as a <TABLE>, and then try to append to that,
> the *table* doesn't accept appendChild() as valid. Specifically, I get
> an 'Invalid argument' error when calling either.
>[/color]

You must have TBODY and append to TBODY. I spent a few hours on that
issue once. :)

Sounds like you are calling appendChild on the wrong object. Without
seeing your full code to be sure, this
playlistTable.a ppendChild(this .songs[x].Write());
seems invalid. You're appending a TR to a TABLE instead of a TBODY
element, I think. Instead...

<table id="playlistTab le">
<tbody id="playlistTab leBody">
....
</table>

document.getEle mentById("playl istTableBody"). appendChild(thi s.songs
[x].Write());


-------------------------------------------------
~kaeli~
Press any key to continue or any other key to quit.
Who is General Failure and why is he reading
my hard disk?

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

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

[Csaba2000]

Re: Modifying HTML Table through DOM

I *think* (I read in a newsgroup) that some browsers don't
like this way of building tables. Don't know if it's true and
I couldn't cite a source (though this newsgroup is a likely
place), but I've always built and modified them using
..insertRow and .insertCell

Good luck,
Csaba Gabor

"Jeff J." <jpj625@earthli nk.net> wrote in message news:f2309d88.0 308281639.3dd07 60e@posting.goo gle.com...[color=blue]
> The basic concept is a music playlist that I'm trying to write as a
> table inside a div.
>
> I have Song and Playlist 'classes'. The Song class has a Write()
> method, as does the Playlist.
>
> The Song.Write() boils down to this:
> var tr = document.create Element("TR");
> var td = document.create Element("TD");
> tr.id = this.ID;
> tr.appendChild( td);
> td.innerText = this.Artist + ' - ' + this.Title;
> td.onclick = function() {top.playSong(t his.parentEleme nt.id);}
> return tr;
>
> The Playlist.Write( ) call is essentially this:
> // this.songs is an Array of Song objects
> for (var x = 0; x < this.songs.leng th; x++) {
> playlistTable.a ppendChild(this .songs[x].Write());
> }
>
> When I attempt to call playlistTable.a ppendChild() after creating the
> table via document.create Element("Table" ), everything works fine,
> except I have no way to add the table to my document, since the div I
> want it in won't believe that appendChild() is a valid method. If I
> put the table in the div as a <TABLE>, and then try to append to that,
> the *table* doesn't accept appendChild() as valid. Specifically, I get
> an 'Invalid argument' error when calling either.
>
> If anyone has ideas on what I'm missing, or where I screwed up, I
> would be most grateful. :)
>
> TIA
>
> ~ Jeff[/color]

[kaeli]

Re: Modifying HTML Table through DOM

In article <f2309d88.03082 90936.471a6774@ posting.google. com>, jpj625
@earthlink.net enlightened us with...[color=blue]
>
> I now get an "Unspecifie d error" when attempting to append to the
> TBODY.
>[/color]

Well, I've been working on some code to make dynamic tables, and it
works fine with the target being a DIV. So I have no clue what you're
doing wrong, since I can't see all your code. You should make a test
file that demonstrates the problem so people can copy and paste and play
with it.

I notice you use innerText - I do not. I use createTextNode. Maybe
that's your problem? I dunno. Also note your onclick should have
attachEvent for compatible browsers
(from one of my pages)
if (S.attachEvent)
{
S.attachEvent(' onchange', buildForm1);
}
else
{
S.onchange = buildForm1;
}

Here's what I have so far for my generic DHTML table. The style stuff
doesn't work in IE but does work in NN (see one of my posts in this
group LOL).
The table creates fine whether target is the div or document.body.
See if your code looks like mine. Use this code if you want, I don't
care.

<html>
<head>
<title>Javascri pt test - dynamic elements</title>

<script type="text/javascript" language="javas cript">
function createTable(tab leId, appendElement)
{
// table attributes as constants for easy modification
STYLE="border: thin solid navy;";

// create table and tbody
T = document.create Element("table" );
TB = document.create Element("tbody" );

// set table and tbody attributes
T.setAttribute( "id",tableI d);
T.setAttribute( "name",tableId) ;
T.setAttribute( "style",STY LE);
TB.setAttribute ("id",tableId+" _body");
TB.setAttribute ("name",tableId +"_body");

// append elements
T.appendChild(T B);
appendElement.a ppendChild(T);
}

function createRow(rowId , appendElement)
{
// row attributes as constants for easy modification
STYLE="backgrou nd-color:yellow";

// create row
R = document.create Element("tr");

// set attributes
R.setAttribute( "id",rowId) ;
R.setAttribute( "name",rowI d);
R.setAttribute( "style",STY LE);

// append element
appendElement.a ppendChild(R);
}

function createCell(cell Id, appendElement)
{
// cell attributes as constants for easy modification
STYLE="color: navy";

// create cell
C = document.create Element("td");

// set attributes
C.setAttribute( "id",cellId );
C.setAttribute( "name",cell Id);
C.setAttribute( "style",STY LE);

// append element
appendElement.a ppendChild(C);
}

function appendCellText( appendElement, text)
{
// create text node
T = document.create TextNode(text);

// append element
appendElement.a ppendChild(T);
}

function createDiv(divId , appendElement)
{
STYLE="border: thin solid navy; width: 300px; height: 300px;";

// create
D = document.create Element("div");

// set attributes
D.setAttribute( "id",divId) ;
D.setAttribute( "style",STY LE);

// append element
appendElement.a ppendChild(D);
}

function testRun()
{
createTable('ne wTable',documen t.getElementByI d('target'));
createRow('newR ow',document.ge tElementById('n ewTable_body')) ;
createCell('new Cell',document. getElementById( 'newRow'));
appendCellText( document.getEle mentById('newCe ll'),'This is a cell');
createDiv("div1 ",document.body );
}
</script>
</head>

<body>
<form name="f1">
<p>
<input type="button" name="b1" value="test it" onClick="testRu n()">
</p>
</form>
<div id="target"></div>
</body>
</html>


-------------------------------------------------
~kaeli~
Press any key to continue or any other key to quit.
Who is General Failure and why is he reading
my hard disk?

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

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