Jump to content

Random Table Shuffler


Guest Sad_Pathetic_Newb

Recommended Posts

Guest Sad_Pathetic_Newb

I'm afraid that I am new to all this. I can build functional webpages but when it comes to Javascript, I'm still at the cut and paste stage. Occasionally, I manage to work out how to create a bit of code or combine two bits of code together but generally I am pretty useless.What I need to do is create a table with 16 cells (4x4) and 16 images. Each cell will contain an image and each image will be a link. Whenever the page is loaded, the images will be shuffled, thus appearing in a random formation with no duplicates.I have managed to scrape together some code but unfortunately it only shuffles the rows and not the columns. The result is that the 4 horizontal cells in each of the four rows are always sequential. For example;05 06 07 0813 14 15 1601 02 03 0409 10 11 12Obviously, I would rather both the rows and colums be shuffled to create a truly random table. For example;09 14 12 0901 15 07 0611 02 08 0305 10 13 04Here is the script;

<script type="text/javascript">Array.prototype.shuffle=function(){var t=this,a=t.length,b=[],c=a,i,r;for(i=0;i<a;i++)b[i]=t[i];for(i=0;i<a-1;i++){r=Math.floor(Math.random()*c);t[i]=b[r];b[r]=b[c-1];c--;}t[a-1]=b[0];return t;}	var subject=document.getElementById("shuffleTable");	var rowData=[];	var rows=subject.getElementsByTagName("TR"), cells;	var j, j	for (i=0; i<rows.length; i++) {		rowData[i]=[];		cells=rows[i].getElementsByTagName("TD");		for (j=0; j<cells.length; j++) rowData[i][j]=cells[j].innerHTML;	}	rowData.shuffle();	for (i=0; i<rowData.length; i++) {		cells=rows[i].getElementsByTagName("TD");		for (j=0; j<cells.length; j++) cells[j].innerHTML=rowData[i][j];	}</SCRIPT>

Can the above script be modified slightly so that it shuffles both rows and columns? Alternatively, can an additional piece of script be added that will shuffle the columns after the above code has shuffled the rows?I would like to avoid Arrays if possible. I may need to expand this table and I'd feel better if I can see what I am doing.Thankyou for any help in advance.

Link to comment
Share on other sites

<script type='text/javascript'>function pick_random_cell(rand, txt){	if(iTD[rand].innerHTML != ""){		pick_random_cell( Math.floor(Math.random() * 16) , txt  );	} else {		iTD[rand].innerHTML = (txt + 1);		iTD[rand].style.fontWeight = "bold";	}}function populate_table(){	for(i=0;i<16;i++){		pick_random_cell( Math.floor(Math.random() * 16), i  );	}}</script><table id='myTable' border='1' cellspacing='0' cellpadding='5'>	<tr><td></td><td></td><td></td><td></td></tr>	<tr><td></td><td></td><td></td><td></td></tr>	<tr><td></td><td></td><td></td><td></td></tr>	<tr><td></td><td></td><td></td><td></td></tr></table><script type='text/javascript'>var iTD = document.getElementById('myTable').getElementsByTagName('TD');populate_table();</script>

How's that?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...