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).

The resetTable Demo button fires this function:

Code:

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:

Code:

<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:

Code:

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:

Code:

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

Code:

<!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, 12:10 PM

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

also - valid code *hangs head in shame*

cheers vw