...
PDA

Randomizing table raws

artdir
07-24-2006, 06:41 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">&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>
ealbrecht
07-24-2006, 10:48 PM
If you want the value of a a node use nodeValue (mynode.nodeValue, myNode.childNode.nodeValue, myNode.parentNode.nodeValue, myNode.childNode.nextSibling.nodeValue, etc...), and if you're trying to get the value of an html element use innerHTML and outerHTML.
Kor
07-25-2006, 06:53 AM
I would have used cloneNode(true) method...
Kor
07-25-2006, 06:55 AM
If you want the value of a a node use nodeValue (mynode.nodeValue, myNode.childNode.nodeValue, myNode.parentNode.nodeValue, myNode.childNode.nextSibling.nodeValue, etc...), and if you're trying to get the value of an html element use innerHTML and outerHTML.
outerHTML is an IE only method. Both are non-standard. innerHTML is crossbrowser and useful sometimes, but in this case it is not. Mixture of DOM and innerHTML might bring troubles most of the time. cloneNode() will do the job very well in this case
Kor
07-25-2006, 09:14 AM
Here's a cross-browser variant using DOM methods:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function randRows(){
var rows = document.getElementById('randomtable').getElementsByTagName('tr');//the rows' collection
var clones=[];//the rows' clones
for(var i=0;i<rows.length;i++){clones[i]=rows[i].cloneNode(true)}
var root = rows[0].parentNode;//the tbody
var r=[];//random unrepeatable index
for(var i=0;i<rows.length;i++){
r[i] = Math.floor(Math.random()*rows.length);
var comp = r[i];
for(var j=0;j<r.length-1;j++){
if(comp==r[j]){i--;break}
}
root.replaceChild(clones[r[i]],rows[i])//replaces the rows with the random indexed clones
}
}
onload=randRows;
</script>
</head>
<body>
<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>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum