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.createElement("TR");
var td = document.createElement("TD");
tr.id = this.ID;
tr.appendChild(td);
td.innerText = this.Artist + ' - ' + this.Title;
td.onclick = function() {top.playSong(this.parentElement.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.length; x++) {
playlistTable.appendChild(this.songs[x].Write());
}

When I attempt to call playlistTable.appendChild() after creating the
table via document.createElement("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]

In article <f2**************************@posting.google.com >, jpj625
@earthlink.net enlightened us with...

When I attempt to call playlistTable.appendChild() after creating the
table via document.createElement("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.
Something's wrong. It should. Full code online anywhere?
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.

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.appendChild(this.songs[x].Write());
seems invalid. You're appending a TR to a TABLE instead of a TBODY
element, I think. Instead...

<table id="playlistTable">
<tbody id="playlistTableBody">
....
</table>

document.getElementById("playlistTableBody").appen dChild(this.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]

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." <jp****@earthlink.net> wrote in message news:f2**************************@posting.google.c om...

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.createElement("TR");
var td = document.createElement("TD");
tr.id = this.ID;
tr.appendChild(td);
td.innerText = this.Artist + ' - ' + this.Title;
td.onclick = function() {top.playSong(this.parentElement.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.length; x++) {
playlistTable.appendChild(this.songs[x].Write());
}

When I attempt to call playlistTable.appendChild() after creating the
table via document.createElement("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]

In article <f2**************************@posting.google.com >, jpj625
@earthlink.net enlightened us with...

I now get an "Unspecified error" when attempting to append to the
TBODY.

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>Javascript test - dynamic elements</title>

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

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

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

// append elements
T.appendChild(TB);
appendElement.appendChild(T);
}

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

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

// set attributes
R.setAttribute("id",rowId);
R.setAttribute("name",rowId);
R.setAttribute("style",STYLE);

// append element
appendElement.appendChild(R);
}

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

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

// set attributes
C.setAttribute("id",cellId);
C.setAttribute("name",cellId);
C.setAttribute("style",STYLE);

// append element
appendElement.appendChild(C);
}

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

// append element
appendElement.appendChild(T);
}

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

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

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

// append element
appendElement.appendChild(D);
}

function testRun()
{
createTable('newTable',document.getElementById('ta rget'));
createRow('newRow',document.getElementById('newTab le_body'));
createCell('newCell',document.getElementById('newR ow'));
appendCellText(document.getElementById('newCell'), 'This is a cell');
createDiv("div1",document.body);
}
</script>
</head>

<body>
<form name="f1">
<p>
<input type="button" name="b1" value="test it" onClick="testRun()">
</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
-------------------------------------------------