Randomize HTML Table Rows from JavaScript

07-01-2008

Dear All,
I have html table and this table contains 10 Rows and 2 column, I want
every time this HTML page is called by the user to view the rows
Randomly.
How can I do this from JavaScript?

waiting for reply
Thank you

07-01-2008

sanju wrote on 01 jul 2008 in comp.lang.javascript:

> I have html table and this table contains 10 Rows and 2 column, I want
> every time this HTML page is called by the user to view the rows
> Randomly.
> How can I do this from JavaScript?

you can use the dom when loaded to change the lines

or document.write when loading the page to write the seperate lines.

use Math.random().

No, I am not going to write your code, have a go at it yourself.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

07-01-2008

sanju a écrit :
> Dear All,
> I have html table and this table contains 10 Rows and 2 column, I want
> every time this HTML page is called by the user to view the rows
> Randomly.
> How can I do this from JavaScript?

you can make :
- array of table's rows
<http://www.howtocreate.co.uk/tutorials/javascript/domtables>
<http://developer.mozilla.org/en/docs/DOM:table>
<http://developer.mozilla.org/en/docs/DOM:element.cloneNode>
- random the array
<http://javascript.about.com/library/blsort2.htm>
- exchange each table's row with the array's item of same index
<http://developer.mozilla.org/en/docs/DOM:element.replaceChild>

<script type="text/javascript">
function tableRowsRandom(myTable) {
var T = document.getElementById(myTable);
T = T.tBodies[0];
T = T.rows;
var n = T.length, R = new Array(n);
for(var i=0; i<n; i++) R[i] = T[i].cloneNode(true);
R.sort(randOrd);
for(var i=0; i<n; i++) {
T[i].parentNode.replaceChild(R[i],T[i]);
}
}
function randOrd(){ return (Math.round(Math.random())-0.5); }
</script>

demo : <http://cjoint.com/?hbkQ1POY0W>

--
sm

07-01-2008

sanju wrote:
> I have html table and this table contains 10 Rows and 2 column, I want
> every time this HTML page is called by the user to view the rows
> Randomly.
> How can I do this from JavaScript?

Quick hack:

/**
* @return A pseudo-random IEEE-754 double in the interval
* <tt>[0, 1)</tt>.
* @type number
*/
function prng()
{
var r = Math.random();

// Opera bug workaround
if (r == 1) r = 0;

return r;
}

/**
* Returns a pseudo-random integer value in the interval
* <tt>[0, top)</tt>, or in the interval <tt>[bottom, top)</tt>
* if <code>bottom</code> was provided.
*
* @param top : number
* @param bottom : optional number
* @return pseudo-random integer value in the specified interval
* @type number
*/
function prng_int(top, bottom)
{
if (!bottom) bottom = 0;
return Math.floor(prng() * (top - bottom)) + bottom;
}

/**
* Sorts the rows of the first table body of the document randomly.
*/
function bodyLoad()
{
// get table object reference
var t = ...
if (t)
{
// get table body object reference
var tbody = (t.tBodies || [])[0];
if (tbody)
{
for (var rows = tbody.rows, len = rows.length, i = len; i--

{
tbody.insertBefore(rows[i], rows[prng_int(len)]);
}
}
}
}

<body onload="bodyLoad()">

> waiting for reply

Usenet is not a right. We[tm] deal with your problem because it looks
interesting enough to spend our[tm] time with, not because the solution
is urgent for you. The more demanding you are, the less interesting it
becomes for us[tm].

<http://catb.org/~esr/faqs/smart-questions.html>

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

07-01-2008

On Jul 1, 2:30*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> sanju wrote:
> > I have html table and this table contains 10 Rows and 2 column, I want
> > every time this HTML page is called by the user to view the rows
> > Randomly.
> > How can I do this from JavaScript?
>
> Quick hack:
>
> * /**
> * ** @return A pseudo-random IEEE-754 double in the interval
> * ** * <tt>[0, 1)</tt>.
> * ** @type number
> * **/
> * function prng()
> * {
> * * var r = Math.random();
>
> * * // Opera bug workaround
> * * if (r == 1) r = 0;
>
> * * return r;
> * }
>
> * /**
> * ** Returns a pseudo-random integer value in the interval
> * ** <tt>[0, top)</tt>, or in the interval <tt>[bottom, top)</tt>
> * ** if <code>bottom</code> was provided.
> * **
> * ** @param top : number
> * ** @param bottom : optional number
> * ** @return pseudo-random integer value in the specified interval
> * ** @type number
> * **/
> * function prng_int(top, bottom)
> * {
> * * if (!bottom) bottom = 0;
> * * return Math.floor(prng() * (top - bottom)) + bottom;
> * }
>
> * /**
> * ** Sorts the rows of the first table body of the document randomly.
> * **/
> * function bodyLoad()
> * {
> * * // get table object reference
> * * var t = ...
> * * if (t)
> * * {
> * * * // get table body object reference
> * * * var tbody = (t.tBodies || [])[0];
> * * * if (tbody)
> * * * {
> * * * * for (var rows = tbody.rows, len = rows.length, i = len; i--

> * * * * {
> * * * * * tbody.insertBefore(rows[i], rows[prng_int(len)]);
> * * * * }
> * * * }
> * * }
> * }
>
> * <body onload="bodyLoad()">
>
> > waiting for reply
>
> Usenet is not a right. *We[tm] deal with your problem because it looks
> interesting enough to spend our[tm] time with, not because the solution
> is urgent for you. *The more demanding you are, the less interesting it
> becomes for us[tm].
>
> <http://catb.org/~esr/faqs/smart-questions.html>
>
> PointedEars
> --
> Use any version of Microsoft Frontpage to create your site.
> (This won't prevent people from viewing your source, but no one
> will want to steal it.)
> * -- from <http://www.vortex-webdesign.com/help/hidesource.htm>

Thanks Thomas,
u r awesome man...
God bless you

07-01-2008

On Jul 1, 2:54*pm, sanju <sdhera...@gmail.com> wrote:
> On Jul 1, 2:30*pm, Thomas 'PointedEars' Lahn <PointedE...@web.de>
> wrote:
>
>
>
>
>
> > sanju wrote:
> > > I have html table and this table contains 10 Rows and 2 column, I want
> > > every time this HTML page is called by the user to view the rows
> > > Randomly.
> > > How can I do this from JavaScript?
>
> > Quick hack:
>
> > * /**
> > * ** @return A pseudo-random IEEE-754 double in the interval
> > * ** * <tt>[0, 1)</tt>.
> > * ** @type number
> > * **/
> > * function prng()
> > * {
> > * * var r = Math.random();
>
> > * * // Opera bug workaround
> > * * if (r == 1) r = 0;
>
> > * * return r;
> > * }
>
> > * /**
> > * ** Returns a pseudo-random integer value in the interval
> > * ** <tt>[0, top)</tt>, or in the interval <tt>[bottom, top)</tt>
> > * ** if <code>bottom</code> was provided.
> > * **
> > * ** @param top : number
> > * ** @param bottom : optional number
> > * ** @return pseudo-random integer value in the specified interval
> > * ** @type number
> > * **/
> > * function prng_int(top, bottom)
> > * {
> > * * if (!bottom) bottom = 0;
> > * * return Math.floor(prng() * (top - bottom)) + bottom;
> > * }
>
> > * /**
> > * ** Sorts the rows of the first table body of the document randomly..
> > * **/
> > * function bodyLoad()
> > * {
> > * * // get table object reference
> > * * var t = ...
> > * * if (t)
> > * * {
> > * * * // get table body object reference
> > * * * var tbody = (t.tBodies || [])[0];
> > * * * if (tbody)
> > * * * {
> > * * * * for (var rows = tbody.rows, len = rows.length, i =len; i--

> > * * * * {
> > * * * * * tbody.insertBefore(rows[i], rows[prng_int(len)]);
> > * * * * }
> > * * * }
> > * * }
> > * }
>
> > * <body onload="bodyLoad()">
>
> > > waiting for reply
>
> > Usenet is not a right. *We[tm] deal with your problem because it looks
> > interesting enough to spend our[tm] time with, not because the solution
> > is urgent for you. *The more demanding you are, the less interesting it
> > becomes for us[tm].
>
> > <http://catb.org/~esr/faqs/smart-questions.html>
>
> > PointedEars
> > --
> > Use any version of Microsoft Frontpage to create your site.
> > (This won't prevent people from viewing your source, but no one
> > will want to steal it.)
> > * -- from <http://www.vortex-webdesign.com/help/hidesource.htm>
>
> Thanks Thomas,
> u r awesome man...
> God bless you- Hide quoted text -
>
> - Show quoted text -

Thanks Thomas,
u r awesome man...
God bless you

07-01-2008

On Jul 1, 11:30*am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
wrote:
> sanju wrote:
> > I have html table and this table contains 10 Rows and 2 column, I want
> > every time this HTML page is called by the user to view the rows
> > Randomly.
> > How can I do this from JavaScript?
>
> Quick hack:
>
> * /**
> * ** @return A pseudo-random IEEE-754 double in the interval
> * ** * <tt>[0, 1)</tt>.
> * ** @type number
> * **/
> * function prng()
> * {
> * * var r = Math.random();
>
> * * // Opera bug workaround
> * * if (r == 1) r = 0;
>
> * * return r;
> * }
>
> * /**
> * ** Returns a pseudo-random integer value in the interval
> * ** <tt>[0, top)</tt>, or in the interval <tt>[bottom, top)</tt>
> * ** if <code>bottom</code> was provided.
> * **
> * ** @param top : number
> * ** @param bottom : optional number
> * ** @return pseudo-random integer value in the specified interval
> * ** @type number
> * **/
> * function prng_int(top, bottom)
> * {
> * * if (!bottom) bottom = 0;
> * * return Math.floor(prng() * (top - bottom)) + bottom;
> * }
>
> * /**
> * ** Sorts the rows of the first table body of the document randomly.
> * **/
> * function bodyLoad()
> * {
> * * // get table object reference
> * * var t = ...
> * * if (t)
> * * {
> * * * // get table body object reference
> * * * var tbody = (t.tBodies || [])[0];
> * * * if (tbody)
> * * * {
> * * * * for (var rows = tbody.rows, len = rows.length, i = len; i--

> * * * * {
> * * * * * tbody.insertBefore(rows[i], rows[prng_int(len)]);
> * * * * }
> * * * }
> * * }
> * }
>
> * <body onload="bodyLoad()">
>

Hmmm, this code shuffles the rows in just 4 lines :

var tbody= (document.getElementById('myTable')).tBodies[0],
rows= tbody.rows, i;
for (i= rows.length; i; i--) {
tbody.appendChild(rows[Math.floor((i)*Math.random())]);
}

And runs ~10% faster : http://tinyurl.com/56g37t

20.49/100 ms (SAM)
9.97/100 ms (Thomas)
9.09/100 ms (Jorge)

--Jorge.

07-01-2008

In comp.lang.javascript message <4869ee29$0$876$>
, Tue, 1 Jul 2008 10:43:20, SAM <
lid> posted:

> R.sort(randOrd);

>function randOrd(){ return (Math.round(Math.random())-0.5); }

Your randOrd does not fulfil the expectations for a Sort function.
There is therefore no guarantee of what your code will do, or how long
it will take. A good random-dealing function is not significantly
longer, and can be found via FAQ 4.22.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk IE7 FF2 Op9 Sf3
news:comp.lang.javascript FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

07-01-2008

In comp.lang.javascript message <>, Tue,
1 Jul 2008 11:30:25, Thomas 'PointedEars' Lahn <>
posted:

> var r = Math.random();
>
> // Opera bug workaround
> if (r == 1) r = 0;

LRN has reported, near five years ago, the bug to be extinct by Opera
6.05; and ISTM that users of non-MS browsers are very likely to upgrade
from time to time. And the bug only appeared rarely.

You could just as well use if (r >= 1) r = 0; just in case a number
exceeding 1.0 ever appears, in any system. Or you could, more briefly,
use Math.random()%1 . Evidently, although you expect others to make
full use of the FAQ, you do not do so yourself. KETFOB.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)

07-02-2008

Jorge a écrit :
> On Jul 1, 11:30 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
> wrote:
>> sanju wrote:
>>> I have html table and this table contains 10 Rows and 2 column, I want
>>> every time this HTML page is called by the user to view the rows
>>> Randomly.
>>> How can I do this from JavaScript?
>
> Hmmm, this code shuffles the rows in just 4 lines :
>
> var tbody= (document.getElementById('myTable')).tBodies[0],
> rows= tbody.rows, i;
> for (i= rows.length; i; i--) {
> tbody.appendChild(rows[Math.floor((i)*Math.random())]);
> }
>
> And runs ~10% faster : http://tinyurl.com/56g37t
>
> 20.49/100 ms (SAM)

Ha Yes ... not so good

> 9.97/100 ms (Thomas)

this one when I tried it re-display the original ordered table with a
step of 4

> 9.09/100 ms (Jorge)

Bon sang ! Mais bien sûr !
the famous appendChild that doesn't only add an element but can also move it

Does this also return to the initial position every 4 times?
--
sm

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Moving dynamically created table rows up and down in an HTML table	T.G.	Javascript	2	10-14-2008 12:56 PM
script for moving rows up and down and traverse thru rows of HTML table	Subba Rao via DotNetMonster.com	ASP .Net	0	03-19-2005 06:46 AM
Table/table rows/table data tag question?	Rio	HTML	4	11-05-2004 08:11 AM
Re: Add HTML Rows in a html table	BluDog	ASP .Net	0	10-20-2004 10:42 AM
Randomize HTML	Gaffer	Javascript	3	05-05-2004 12:27 AM