You have a stray opening <td> tag in the second row of that table. That threw me off a little when I copied the markup and worked up a script for this. I only mention it because, if you aren't careful, it might throw things off for you as well. I fixed it here in this demo:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function randomizeColumns(table){
table = document.getElementById(table);
var rows = table.rows, cols = rows[0].cells, colAr = [], randtable = table.cloneNode(true),
rrows = randtable.rows, placeholder = randomizeColumns.placeholder, plucked, i, j;
for (i = cols.length - 1; i > -1; --i){
colAr.push(i);
}
colAr.sort(function(){return Math.random() - 0.5;});
for (i = rrows.length - 1; i > -1; --i){
for (j = colAr.length - 1; j > -1; --j){
plucked = rows[i].replaceChild(placeholder(), rows[i].cells[colAr[j]]);
rrows[i].replaceChild(plucked, rrows[i].cells[j]);
}
}
table.parentNode.replaceChild(randtable, table);
}
randomizeColumns.placeholdertd = document.createElement('td');
randomizeColumns.placeholder = function(){return randomizeColumns.placeholdertd.cloneNode(false);};
</script>
</head>
<body>
<table id="table_a">
<tr>
<td class="group1">Red</td>
<td class="group1">Blue</td>
<td class="group1">Yellow</td>
</tr>
<tr>
<td class="group1-bottom">Red footer</td>
<td class="group1-bottom">Blue footer</td>
<td class="group1-bottom">Yellow footer</td>
</tr>
</table>
<input type="button" value="Randomize" onclick="randomizeColumns('table_a');" />
<script type="text/javascript">
randomizeColumns('table_a');
</script>
</body>
</html>
Notes: Randomizes onload and onclick of the Randomize button. The classes are not required. I left them in so they could be used to style the td's. Should work with any number of rows as long as the number of td's in each row is the same as all of the other rows.
Random Content Order script help
Reply With Quote
Bookmarks