{"id":2016,"date":"2009-05-01T16:00:40","date_gmt":"2009-05-01T15:00:40","guid":{"rendered":"http:\/\/www.bitvolution.com\/?p=3"},"modified":"2016-12-04T09:57:54","modified_gmt":"2016-12-04T09:57:54","slug":"using-javascript-to-make-a-table-rotate","status":"publish","type":"post","link":"https:\/\/www.tomfotherby.com\/blog\/index.php\/2009\/05\/using-javascript-to-make-a-table-rotate\/","title":{"rendered":"Using Javascript to make a table rotate"},"content":{"rendered":"<p>It only takes a few lines of Javascript to make a HTML table start rotating it&#8217;s rows. Example:<\/p>\n<div class=\"clearAfter\" style=\"width:510px;margin:0 auto\">\n<div class=\"alignleft\" style=\"width:130px;padding:0 5px 0 0;margin:0;text-align:center\">\n<h2>Demo 1<\/h2>\n<table>\n<tbody id=\"myTableBody\">\n<tr class=\"d0\">\n<td>field 1a<\/td>\n<td>field 1b<\/td>\n<\/tr>\n<tr class=\"d1\">\n<td>field 2a<\/td>\n<td>field 2b<\/td>\n<\/tr>\n<tr class=\"d2\">\n<td>field 3a<\/td>\n<td>field 3b<\/td>\n<\/tr>\n<tr class=\"d3\">\n<td>field 4a<\/td>\n<td>field 4b<\/td>\n<\/tr>\n<tr class=\"d0\">\n<td>field 5a<\/td>\n<td>field 5b<\/td>\n<\/tr>\n<tr class=\"d1\">\n<td>field 6a<\/td>\n<td>field 6b<\/td>\n<\/tr>\n<tr class=\"d2\">\n<td>field 7a<\/td>\n<td>field 7b<\/td>\n<\/tr>\n<tr class=\"d3\">\n<td>field 8a<\/td>\n<td>field 8b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>  <script type=\"text\/javascript\"><!--\/\/--><![CDATA[\/\/><!--\n\tfunction poprows()\n\t{\n\t\tvar tableBody = document.getElementById(\"myTableBody\");\n\t\ttableBody.insertBefore(tableBody.removeChild(tableBody.lastChild), tableBody.firstChild);\n\t}\n\tvar poprowstimer = setInterval('poprows()', 1000);\n  \/\/--><!]]><\/script><\/p>\n<\/div>\n<div class=\"alignleft\" style=\"width:355px;padding:0 0 0 5px;margin:0;text-align:center\">\n<h2>Demo 2 &#8211; Job board<\/h2>\n<div style=\"padding:5px;width:350px;height:267px;overflow:hidden\">\n<table class=\"noBorder\" id=\"resultsTable\" style=\"border:0\">\n<tr>\n<td>\n<div>Web designer<\/div>\n<\/td>\n<td>\n<div>&pound;140.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Start Up Stationary Design<\/div>\n<\/td>\n<td>\n<div>&pound;80.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Flash \/ XML Menu System<\/div>\n<\/td>\n<td>\n<div>&pound;400.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Open Source Application Rebranding<\/div>\n<\/td>\n<td>\n<div>&pound;10.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Website Design\/Build<\/div>\n<\/td>\n<td>\n<div>&pound;50.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Internet Marketing Guru<\/div>\n<\/td>\n<td>\n<div>&pound;40.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Icon design &#8211; Urgent project<\/div>\n<\/td>\n<td>\n<div>&pound;40.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Looking for a dragon slayer<\/div>\n<\/td>\n<td>\n<div>&pound;30.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Poster Design<\/div>\n<\/td>\n<td>\n<div>&pound;460.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Telesales contacting schools<\/div>\n<\/td>\n<td>\n<div>&pound;40.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Save the cheerleader<\/div>\n<\/td>\n<td>\n<div>&pound;40.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Recruiting, need a honest liar<\/div>\n<\/td>\n<td>\n<div>&pound;403.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Chess grand master wanted<\/div>\n<\/td>\n<td>\n<div>&pound;440.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Gringots gold for sale<\/div>\n<\/td>\n<td>\n<div>&pound;430.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>webmaster of the universe<\/div>\n<\/td>\n<td>\n<div>&pound;240.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>sale of widgets<\/div>\n<\/td>\n<td>\n<div>&pound;450.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>Will code for food<\/div>\n<\/td>\n<td>\n<div>&pound;420.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>waterproof fish required<\/div>\n<\/td>\n<td>\n<div>&pound;4520.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>blind waiter needed<\/div>\n<\/td>\n<td>\n<div>&pound;240.00<\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div>fire resistant cigaretes?<\/div>\n<\/td>\n<td>\n<div>&pound;420.00<\/div>\n<\/td>\n<\/tr>\n<\/table><\/div>\n<p>  <script type=\"text\/javascript\"><!--\/\/--><![CDATA[\/\/><!--\n    function poprows2()\n    {\n        var newRow = jQuery('#resultsTable tr:last').remove();\n        jQuery('td div',newRow).hide();\n        jQuery('#resultsTable tr:first').before(newRow);\n        jQuery('td div',newRow).fadeIn(2500);\n    }\n\tvar poprowstimer = setInterval('poprows2()', 3000);\n  \/\/--><!]]><\/script>\n<\/div>\n<\/div>\n<p>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.<\/p>\n<p><!--more--><\/p>\n<h3>Demo 1<\/h3>\n<p>We give the <span class=\"demoSetting\">tbody<\/span> an id of &#8220;<em>myTableBody<\/em>&#8221; so we can grab it with <code>document.getElementById(\"myTableBody\")<\/code> and use the javascript <code>firstChild<\/code> and <code>lastChild<\/code> selectors to reference the top and bottom rows. To loop continuously, we use code&gt;setInterval<\/code>.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&quot; &quot;http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd&quot;&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Rotating table example&lt;\/title&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\tfunction poprows()\r\n\t{\r\n\t\tvar tableBody = document.getElementById(&quot;myTableBody&quot;);\r\n\t\ttableBody.insertBefore(tableBody.removeChild(tableBody.lastChild), tableBody.firstChild);\r\n\t}\r\n\tvar poprowstimer = setInterval('poprows()', 1000);\r\n\t&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\t&lt;h2&gt;A rotating Table&lt;\/h2&gt;\r\n\t&lt;table&gt;\r\n\t&lt;tbody id=&quot;myTableBody&quot;&gt;\r\n\t&lt;tr&gt;&lt;td&gt;field 1a&lt;\/td&gt;&lt;td&gt;field 1b&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;field 2a&lt;\/td&gt;&lt;td&gt;field 2b&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;field 3a&lt;\/td&gt;&lt;td&gt;field 3b&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;field 4a&lt;\/td&gt;&lt;td&gt;field 4b&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;field 5a&lt;\/td&gt;&lt;td&gt;field 5b&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;\/tbody&gt;\r\n\t&lt;\/table&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h3>Demo 2 &#8211; Job board<\/h3>\n<p>There are two main changes from demo 1:<\/p>\n<ol>\n<li>We use some JQuery to give us a fade in effect. In my opinion, using Jquery makes the Javascript more readable and maintainable.<\/li>\n<li>We start the table with only the first few rows visible using <code>overflow:hidden<\/code>. This trick gives the illusion that fresh content is continuously scrolling on the page a.k.a a vertical ticker.\n<\/li>\n<\/ol>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html PUBLIC &quot;-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN&quot; &quot;http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd&quot;&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Example&lt;\/title&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot; src=&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3\/jquery.min.js&quot;&gt;&lt;\/script&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\tfunction poprows()\r\n\t{\r\n\t\tvar newRow = $('#resultsTable tr:last').remove(); \/\/ Remove last row\r\n\t\t$('td div',newRow).hide();                        \/\/ Hide inner row divs\r\n\t\t$('#resultsTable tr:first').before(newRow);       \/\/ Add row as first\r\n\t\t$('td div',newRow).fadeIn(2500);                  \/\/ Show inner row divs slowly\r\n\t}\r\n\r\n\t$(document).ready(function()\r\n\t{\r\n\t\tvar poprowstimer = setInterval('poprows()', 1000);\r\n\t});\r\n\t&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;h2&gt;A Job Board&lt;\/h2&gt;\r\n  &lt;div style=&quot;height:275px;overflow:hidden&quot;&gt;\r\n\t&lt;table id=&quot;resultsTable&quot;&gt;\r\n\t&lt;tr&gt;&lt;td&gt;&lt;div&gt;Web designer&lt;\/div&gt;&lt;\/td&gt;&lt;td&gt;&lt;div&gt;&amp;pound;140.00 Fixed Fee&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;&lt;div&gt;Start Up Stationary Design&lt;\/div&gt;&lt;\/td&gt;&lt;td&gt;&lt;div&gt;&amp;pound;80.00 Variable Fee&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;&lt;div&gt;Flash \/ XML Menu System&lt;\/div&gt;&lt;\/td&gt;&lt;td&gt;&lt;div&gt;&amp;pound;400.00 Fixed Fee&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;&lt;div&gt;Website Design\/Build&lt;\/div&gt;&lt;\/td&gt;&lt;td&gt;&lt;div&gt;&amp;pound;50.00 Variable Fee&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;tr&gt;&lt;td&gt;&lt;div&gt;Internet Marketing Guru&lt;\/div&gt;&lt;\/td&gt;&lt;td&gt;&lt;div&gt;&amp;pound;40.00 Variable Fee&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n...\r\n\t&lt;tr&gt;&lt;td&gt;&lt;div&gt;webmaster of the universe&lt;\/div&gt;&lt;\/td&gt;&lt;td&gt;&lt;div&gt;&amp;pound;240.00 Fixed Fee&lt;\/div&gt;&lt;\/td&gt;&lt;\/tr&gt;\r\n\t&lt;\/table&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>It only takes a few lines of Javascript to make a HTML table start rotating it&#8217;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 &#8211; [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[92],"tags":[81,94],"class_list":["post-2016","post","type-post","status-publish","format-standard","hentry","category-tutorial","tag-javascript","tag-jquery"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2016"}],"version-history":[{"count":2,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2016\/revisions"}],"predecessor-version":[{"id":2049,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2016\/revisions\/2049"}],"wp:attachment":[{"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomfotherby.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}