How to randomize table rows (never attempted before)

**artdir** · 07-24-2006, 02:14 PM

I am new in JS and is faced with a problem of randomization of the table rows, without including content of each table row inside JS (I haven't seen this attempted before).

So far I have the following code (see below) and the problem is that I don't know how to extract data from <tr> and create an array out of them, so then I could randomize them.

Any kind of tips, pointers, help of any kind will be really truly well appreciated.

CODE:

<html>
<head>
<title>Random Table Example</title>

<script language="javascript" type="text/javascript">
function randomize(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
alert ("Table Raws: " + rows.length);
var test_it = new Array (rows.length);
// Assign nothing to each test_it element so rows will not repeat upon being randomized
for (i=0; i < rows.length; i++){
test_it[i] = "";
}

for (i=0; i < rows.length; i++){
// => rows[i] = get.childnode; // How do I get content of everything inside <tr>? and create an array out of it?
}

for(i = 0; i < rows.length; i++){
rndm = Math.round(Math.random() * rows.length)
if (test_it[rndm] == "")
{
test_it[rndm] = rows[rndm] // content of the array should be here
hits += 1
document.write('<table width="500" align="center"><tr>' + rows[rndm] + '<\/tr><\/table>');
}
}}}
</script>
</head>

<body onLoad="randomize('randomtable')">
<table width="560" border="0" cellpadding="0" cellspacing="2" id="randomtable">
<tr>
<td width="227">Row 1 - Black </td>
<td width="55" bgcolor="#000000"> </td>
<td width="278"><div align="center">Black</div></td>
</tr>
<tr>
<td>Row 2 - Brown </td>
<td bgcolor="#D47F55"> </td>
<td><div align="center">Brown</div></td>
</tr>
<tr>
<td>Row 3 - Green </td>
<td bgcolor="#009F00"> </td>
<td><div align="center">Green</div></td>
</tr>
<tr>
<td>Row 4 - Red </td>
<td bgcolor="#AA0000"> </td>
<td><div align="center">Red</div></td>
</tr>
<tr>
<td>Row 5 - Blue </td>
<td bgcolor="#009FFF"> </td>
<td><div align="center">Blue</div></td>
</tr>
<tr>
<td>Row 6 - Orange </td>
<td bgcolor="#FF7F55"> </td>
<td><div align="center">Orange</div></td>
</tr>
<tr>
<td>Row 7 - Purple </td>
<td bgcolor="#AA00FF"> </td>
<td><div align="center">Purple</div></td>
</tr>
<tr>
<td>Row 8 - Pink </td>
<td bgcolor="#FF00FF"> </td>
<td><div align="center">Pink</div></td>
</tr>
</table>

</body>
</html>

**funkdaddu** · 11:26 PM

OK, I threw you a bone here, since no one else would:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<style>
		</style>
		<script type="text/javascript"><!--
//took this from http://www.thedevproject.com/2006/05/08/randomizing-javascript-arrays/
Array.prototype.shuffle = function() {
  for (var i = 0; i < this.length; i++) {
    // Random item in this array.
    var r = parseInt(Math.random() * this.length);
    var obj = this[r];
 
    // Swap.
    this[r] = this[i];
    this[i] = obj;
  }
}

function randomize(tableID) {
	var myTable = document.getElementById(tableID);
	var myRows = new Array();
	for (i=myTable.rows.length-1; i>=0; i--) {
		var theRow = myTable.rows[i];
		myRows.push(theRow);
		theRow.parentNode.removeChild(theRow);
	}
	myRows.shuffle();
	for (j=0; j<myRows.length; j++) {
		myTable.appendChild(myRows[j]);
	}
}
window.onload = function() {
	randomize("randomtable");
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
<table width="560" border="0" cellpadding="0" cellspacing="2" id="randomtable">
	<tr>
		<td width="227">Row 1 - Black </td>
		<td width="55" bgcolor="#000000">&nbsp;</td>
		<td width="278"><div align="center">Black</div></td>
	</tr>
	<tr>
		<td>Row 2 - Brown </td>
		<td bgcolor="#D47F55">&nbsp;</td>
		<td><div align="center">Brown</div></td>
	</tr>
	<tr>
		<td>Row 3 - Green </td>
		<td bgcolor="#009F00">&nbsp;</td>
		<td><div align="center">Green</div></td>
	</tr>
	<tr>
		<td>Row 4 - Red </td>
		<td bgcolor="#AA0000">&nbsp;</td>
		<td><div align="center">Red</div></td>
	</tr>
	<tr>
		<td>Row 5 - Blue </td>
		<td bgcolor="#009FFF">&nbsp;</td>
		<td><div align="center">Blue</div></td>
	</tr>
	<tr>
		<td>Row 6 - Orange </td>
		<td bgcolor="#FF7F55">&nbsp;</td>
		<td><div align="center">Orange</div></td>
	</tr>
	<tr>
		<td>Row 7 - Purple </td>
		<td bgcolor="#AA00FF">&nbsp;</td>
		<td><div align="center">Purple</div></td>
	</tr>
	<tr>
		<td>Row 8 - Pink </td>
		<td bgcolor="#FF00FF">&nbsp;</td>
		<td><div align="center">Pink</div></td>
	</tr>
</table>	</body>

</html>

Just helps my JS chops

**seansan** · 08-31-2006, 08:31 AM

The code looks good, but the only thing it does for me is hide the tabel. I briefly see the table, then it is gone ....

so removechild is working .. but after that something goes wrong

**funkdaddu** · 08-31-2006, 09:01 AM

Works in FF and Safari... must be an IE bug. Lemme boot up the old Windows machine...

**funkdaddu** · 08-31-2006, 09:17 AM

OK, IE needs a TBODY element to write the rows. Here is the new function:

Code:

function randomize(tableID) {
	var myTable = document.getElementById(tableID);
	var myRows = new Array();
	for (i=myTable.rows.length-1; i>=0; i--) {
		var theRow = myTable.rows[i];
		myRows.push(theRow);
		theRow.parentNode.removeChild(theRow);
	}
	myRows.shuffle();
	for (j=0; j<myRows.length; j++) {
		var newTbody = document.createElement("tbody");
		newTbody.appendChild(myRows[j]);
		myTable.appendChild(newTbody);
	}
}