Resolved Building a table with javascript DOM - the table 'moves down' [Archive]

...

View Full Version : Resolved Building a table with javascript DOM - the table 'moves down'

Mikebert4

09-04-2008, 10:39 AM

Ok, I've got a simple HTML page (DEMO HERE (http://www.nefariousguild.co.uk/tableDemo)).

The resetTable Demo button fires this function:

function resetTerrTable()
{
var title_arr = ["Territory","Availability","Style","Group","Label"]; //array of titles

if ( terrs.hasChildNodes() ){
while ( terrs.childNodes.length >= 1 ){
terrs.removeChild( terrs.firstChild );
}
} //clear the territories table

var titlebar = document.createElement("tr"); //create first <TR> element

for(i=0; i<title_arr.length; i++)
{
var title = document.createElement("th");
if(document.all){
title.innerText = title_arr[i];
}else{
title.textContent = title_arr[i];
}
titlebar.appendChild(title);
} //populate it with titles from the array

terrs.appendChild(titlebar); //write out first row
}

and the HTML on the page looks like this:

<body>

<input type="button" value="resetTable" onclick="resetTerrTable()">
<table id="territories">
<tr>
<th>Territory</th>
<th>Availability</th>
<th>Style</th>
<th>Group</th>
<th>Label</th>
</tr>
<tr>
<td colspan="5">Random Data that gets removed when you reset table</td>
</tr>
</table>

<script type="text/javascript">

</script>
</body>

I've two questions:

1. Why does the table 'expand' by 1 pixel when resetTerrTable() is fired in Firefox?

2. Why doesn't the DOM work in IE?

I've tried writing the titlebar element to the document before giving it children, thus:

function resetTerrTable()
{
var title_arr = ["Territory","Availability","Style","Group","Label"]; //array of titles

if ( terrs.hasChildNodes() ){
while ( terrs.childNodes.length >= 1 ){
terrs.removeChild( terrs.firstChild );
}
} //clear the territories table

var titlebar = document.createElement("tr"); //create first <TR> element
titlebar.setAttribute("id","titlebar");
terrs.appendChild(titlebar); //write out first row

for(i=0; i<title_arr.length; i++)
{
var title = document.createElement("th");
if(document.all){
title.innerText = title_arr[i];
}else{
title.textContent = title_arr[i];
}
document.getElementById('titlebar').appendChild(title);
} //populate it with titles from the array
}

I'm more than a little stumped with this, can anyone help?

Many thanks,

Mike

Mikebert4

09-04-2008, 11:11 AM

Ok, quick update:

I've fixed the step-down trouble by completely re-generating the Table every time:

function resetTerrTable()
{
var wrapper = document.getElementById('wrapper');

wrapper.removeChild(terrs);

var terrtable = document.createElement('table');
terrtable.setAttribute('id','territories');
wrapper.appendChild(terrtable);

terrs = document.getElementById('territories');

var title_arr = ["Territory","Availability","Style","Group","Label"]; //array of titles

if ( terrs.hasChildNodes() ){
while ( terrs.childNodes.length >= 1 ){
terrs.removeChild( terrs.firstChild );
}
} //clear the territories table

var titlebar = document.createElement("tr"); //create first <TR> element

for(i=0; i<title_arr.length; i++)
{
var title = document.createElement("th");
if(document.all){
title.innerText = title_arr[i];
}else{
title.textContent = title_arr[i];
}
titlebar.appendChild(title);
} //populate it with titles from the array

terrs.appendChild(titlebar); //write out first row
}

I'm still struggling to get it to play in IE though :(

vwphillips

09-04-2008, 11:36 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function resetTerrTable()
{
var title_arr = ["Territory","Availability","Style","Group","Label"]; //array of titles

if ( terrs.hasChildNodes() ){
while ( terrs.childNodes.length >= 1 ){
terrs.removeChild( terrs.firstChild );
}
} //clear the territories table

var titlebar = document.createElement("tr"); //create first <TR> element

for(i=0; i<title_arr.length; i++)
{
var title = document.createElement("th");
if(document.all){
title.innerText = title_arr[i];
}else{
title.textContent = title_arr[i];
}
titlebar.appendChild(title);
} //populate it with titles from the array

terrs.appendChild(titlebar); //write out first row
}
/*]]>*/
</script></head>

<body>

<input type="button" value="resetTable" onclick="resetTerrTable()">
<table>
<tbody id="territories">
<tr>
<th>Territory</th>
<th>Availability</th>
<th>Style</th>
<th>Group</th>
<th>Label</th>
</tr>
<tr>
<td colspan="5">Random Data that gets removed when you reset table</td>
</tr>
</tbody>
</table>

<script type="text/javascript">

</script>
</body>
</body>

</html>

Mikebert4

09-04-2008, 12:10 PM

Ahh, didn't think of using <tbody>.

also - valid code *hangs head in shame*

cheers vw :)