Title: HTML - Change display order of entire tables on a page
Tags: html
Question: I have a list of tables with various elements on a page. I want to have the display order of the various tables change randomly each time a page is loaded. Any ideas on how to do this? For reference, the code below shows the first two tables. Say I wanted to randomly change their display order - how would I do that?
<table&gt;
<tr&gt;
<td class="lender-logo" width="200" height="168x"&gt;<img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/CleanFund_LOGO.jpg" alt="Clean Fund LLC" width="200" /&gt;
</td&gt;
<td width="15px"&gt;</td&gt;
<td width="340px"&gt;
<strong&gt;Clean Fund LLC</strong&gt;
<span style="font-size: small;"&gt;<strong&gt;Preferred Financing Range:</strong&gt; $500K - $15M
<strong&gt;Types of Projects:</strong&gt; Any
<strong&gt;Contact:</strong&gt; <a href="mailto:jaredbonilla@example.net"&gt;Josh Kagan</a&gt;
<a href="http://www.cleanfund.com" target="_blank"&gt;www.cleanfund.com</a&gt;
</span&gt;
</td&gt;
</tr&gt;
</table&gt;
<hr /&gt;
<table&gt;
<tr&gt;
<td class="lender-logo" width="200" height="168x"&gt;<img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/Greenworks-Lending-Logo.jpg" alt="Greenworks Lending" width="200" /&gt;
</td&gt;
<td width="15px"&gt;</td&gt;
<td width="340px"&gt;
<strong&gt;Greenworks Lending</strong&gt;
<span style="font-size: small;"&gt;<strong&gt;Preferred Financing Range:</strong&gt; $30K - $5M
<strong&gt;Types of Projects:</strong&gt; Any Eligible Technologies and Properties
<strong&gt;Contact:</strong&gt; <a href="mailto:jaredbonilla@example.net"&gt;jaredbonilla@example.net</a&gt;
<a href="http://www.greenworkslending.com" target="_blank"&gt;www.greenworkslending.com</a&gt;
</span&gt;
</td&gt;
</tr&gt;
</table&gt;
Comment: You would need to use JavaScript. I highly reccomend you [learn JavaScript](https://developer.mozilla.org/en-US/Learn/JavaScript) before jumping into jQuery as others say.

Comment: can you please indent your code properly?

Comment: Is that tabular data or a table used for layout?


Here is another answer: Are you able to use javascript on that page? My suggestion would be to write a javascript function that selects the table elements and then appends them back to their parent element in a random order.

Here is another answer: This shows how to do with jQuery.  You would need to use some JavaScript to accomplish this and jQuery is one option.  You need a language like JavaScript to do this type of dynamic content.
https://css-tricks.com/snippets/jquery/shuffle-dom-elements/
Here is the code on the page in case it gets deleted, this was take from that page:
$.fn.shuffle :
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
And the usage is as follows:
// Shuffle all list items within a list:
$('ul#list li').shuffle();
// Shuffle all DIVs within the document:
$('div').shuffle();
// Shuffle all <a&gt;s and <em&gt;s:
$('a,em').shuffle();
In your case, you would:
Include jQuery js file in your webpage
Save the code for  $.fn.shuffle and save in a js file, and in include that in your webpage
Include the javescript to call the shuffle: $('table').shuffle();

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:08/18/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html>', 'Title': 'HTML - Change display order of entire tables on a page', 'ViewCount': 48, 'id': 32080343, 'user_AboutMe': None, 'user_AccountId': 6810014.0, 'user_DisplayName': 'Jonathon Blackburn', 'user_Reputation': 21.0, 'user_Views': 1.0, 'user_id': 5240562.0}}