...

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



Mikebert4
09-04-2008, 11: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">
<!--
var terrs = document.getElementById("territories");
//-->
</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, 12:11 PM
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, 12:36 PM
<!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">
<!--
var terrs = document.getElementById("territories");
//-->
</script>
</body>
</body>

</html>

Mikebert4
09-04-2008, 01:10 PM
Ahh, didn't think of using <tbody>.

also - valid code *hangs head in shame*

cheers vw :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum