Home
May 1 2009
Using Javascript to make a table rotate
It only takes a few lines of Javascript to make a HTML table start rotating it’s rows. Example:
Demo 1
| field 1a | field 1b |
| field 2a | field 2b |
| field 3a | field 3b |
| field 4a | field 4b |
| field 5a | field 5b |
| field 6a | field 6b |
| field 7a | field 7b |
| field 8a | field 8b |
Demo 2 – Job board
Using javascript, you need to remove the last row of the table and then insert it in front of the first table row and then repeat continuously.
Demo 1
We give the tbody an id of “myTableBody” so we can grab it with document.getElementById("myTableBody") and use the javascript firstChild and lastChild selectors to reference the top and bottom rows. To loop continuously, we use code>setInterval.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Rotating table example</title>
<script type="text/javascript">
function poprows()
{
var tableBody = document.getElementById("myTableBody");
tableBody.insertBefore(tableBody.removeChild(tableBody.lastChild), tableBody.firstChild);
}
var poprowstimer = setInterval('poprows()', 1000);
</script>
</head>
<body>
<h2>A rotating Table</h2>
<table>
<tbody id="myTableBody">
<tr><td>field 1a</td><td>field 1b</td></tr>
<tr><td>field 2a</td><td>field 2b</td></tr>
<tr><td>field 3a</td><td>field 3b</td></tr>
<tr><td>field 4a</td><td>field 4b</td></tr>
<tr><td>field 5a</td><td>field 5b</td></tr>
</tbody>
</table>
</body>
</html>
Demo 2 - Job board
There are two main changes from demo 1:
- We use some JQuery to give us a fade in effect. In my opinion, using Jquery makes the Javascript more readable and maintainable.
- We start the table with only the first few rows visible using
overflow:hidden. This trick gives the illusion that fresh content is continuously scrolling on the page a.k.a a vertical ticker.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
function poprows()
{
var newRow = $('#resultsTable tr:last').remove(); // Remove last row
$('td div',newRow).hide(); // Hide inner row divs
$('#resultsTable tr:first').before(newRow); // Add row as first
$('td div',newRow).fadeIn(2500); // Show inner row divs slowly
}
$(document).ready(function()
{
var poprowstimer = setInterval('poprows()', 1000);
});
</script>
</head>
<body>
<h2>A Job Board</h2>
<div style="height:275px;overflow:hidden">
<table id="resultsTable">
<tr><td><div>Web designer</div></td><td><div>£140.00 Fixed Fee</div></td></tr>
<tr><td><div>Start Up Stationary Design</div></td><td><div>£80.00 Variable Fee</div></td></tr>
<tr><td><div>Flash / XML Menu System</div></td><td><div>£400.00 Fixed Fee</div></td></tr>
<tr><td><div>Website Design/Build</div></td><td><div>£50.00 Variable Fee</div></td></tr>
<tr><td><div>Internet Marketing Guru</div></td><td><div>£40.00 Variable Fee</div></td></tr>
...
<tr><td><div>webmaster of the universe</div></td><td><div>£240.00 Fixed Fee</div></td></tr>
</table>
</div>
</body>
</html>
Its cool. But is it possible to make table refreshable with in this code.
For demo 1 how do you stop the rows from rotation using onmouseover?