Creating a Scrolling Table Using appendChild() and insertBefore()

for IE5.5+, Netscape 7+, Mozilla 1.1+, and Safari

appendChild() and insertBefore() are methods that let you place nodes in the document. They can be used to place newly created objects and they can be used with nodes already in the document. When used with nodes already in the document, they will first remove the node from it's original location before placing it in it's new location. This tutorial exploits this behaviour to create a scrolling table.

appendChild() uses the syntax destinationNode.appendChild(node) and makes the node the last child node of destinationNode.

insertBefore() uses the syntax destinationNode.insertBefore(node, referenceNode) and places the node before the referenceNode, which is a child node of destinationNode. If you leave out referenceNode the method will behave like appendChild().

Using both methods we can create a table that scrolls up or down. Mouse over 'Up' or 'Down' ( below ) to see it in action.

 

Table id="pa_reps" PENNSYLVANIA REPRESENTATIVES - 107th CONGRESS 1 Robert A. Brady Philadelphia 2 Chaka Fattah Philadelphia 3 Robert A. Borski Philadelphia 4 Melissa A. Hart Bradford Woods 5 John E. Peterson Pleasantville 6 Tim Holden Saint Clair 7 Curt Weldon Aston 8 James C. Greenwood Doylestown 9 Bill Shuster Hollidaysburg 10 Don Sherwood Tunkhannock 11 Paul E. Kanjorski Nanticoke 12 John P. Murtha Johnstown 13 Joseph M. Hoeffel Abington 14 William J. Coyne Pittsburgh 15 Patrick J. Toomey Allentown 16 Joseph R. Pitts Kennett Square 17 George W. Gekas Harrisburg 18 Michael F. Doyle Swissvale 19 Todd Russell Platts York 20 Frank Mascara Charleroi 21 Phil English Erie

Up    Down

 

Here's how it works:

The table id="pa_reps" contains caption, thead, and tbody tags. It's the rows in the tbody that scroll.
It is very important that you remove all the whitespace between the tags in the tbody or the scripts won't work with Netscape.

<table width="400" border="1" id="pa_reps">
<caption>Table id="pa_reps"</caption>
<thead>
<tr style="background-color:#ccccff">
<th colspan="3">PENNSYLVANIA REPRESENTATIVES - 107th CONGRESS</th></tr>
</thead>
<tbody><tr><td>1</td><td>Robert A. Brady </td><td>Philadelphia </td></tr>
// -- the rest of the table edited out to save space

 

The 'Up' and 'Down' divs use onmouseover and onmouseout to start and stop the scrolling.

<div onmouseover="startScroll('U')" onmouseout="stopScroll()">Up</div>
<div onmouseover="startScroll('D')" onmouseout="stopScroll()">Down</div>

<script>
// -- get the first tbody of table id="pa_reps"
var tb = document.getElementById('pa_reps').getElementsByTagName('tbody')[0];
// -- this will store the ID returned by setInterval()
var xx;

function startScroll(dir){
  if (dir == 'U')
    xx = setInterval("scrollUp()", 300);
  else
    xx = setInterval("scrollDown()", 300);
}

function scrollUp(){
  // -- get the tbody's first child (tr)
  var r1 = tb.childNodes[0];

  if (r1)
    tb.appendChild(r1);
}

function scrollDown(){
  var r1 = tb.childNodes[0];
  // -- get the tbody's last child (tr)
  var rLast = tb.childNodes[tb.childNodes.length - 1];

  if (rLast)
    tb.insertBefore(rLast, r1);
}

function stopScroll(){
  if (xx != null)
    clearInterval(xx);
}
</script>

 

Netscape 6 Note:

The reason the scrolling table is not recommended with N6 is that N6 has a problem with insertBefore() when you use it to insert the new row before the first row. It seems to put it as the first node of the table tag. It will work fine if you set the referenceNode to anything other than childNode[0]. The only problem is that the rows above referenceNode will never move.

 

*WARNING!

Netscape 6+ treats whitespace as text nodes.

In the table above, the <tbody> has 22 childNodes (<tr>s). But Netscape 6, because it was counting whitespace, kept insisting that there were 49 childNodes.

In order for this example to work properly in N6 I had to remove ALL the whitespace between the tags in the tbody. Do a 'View Source' to see what I mean.

---

PXL8 2003