Guest Sad_Pathetic_Newb Posted December 12, 2006 Share Posted December 12, 2006 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 More sharing options...
Webworldx Posted December 13, 2006 Share Posted December 13, 2006 <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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now