Modifying HTML Table through DOM

J

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
 
K

kaeli

jpj625 said:
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.
Click to expand...

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.
Click to expand...

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").appendChild(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
-------------------------------------------------
 
C

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
 
K

kaeli

jpj625 said:
I now get an "Unspecified error" when attempting to append to the
TBODY.
Click to expand...

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('target'));
createRow('newRow',document.getElementById('newTable_body'));
createCell('newCell',document.getElementById('newRow'));
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
-------------------------------------------------
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascript DOM 1
Only one table shows up with the information 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help with <rowspan> in an HTML table 1
How can I create a table using the input element? 1
HTML Table Issue 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to have two html audio players on one page? 0

Members online

No members online now.
Total: 110 (members: 0, guests: 110)
Robots: 97

Forum statistics

Threads
474,083
Messages
2,570,591
Members
47,212
Latest member
RobynWiley

Latest Threads

Top