Randomize HTML Table Rows from JavaScript

**Evertjan.** · Jul 1 '08, 07:25 AM

Re: Randomize HTML Table Rows from JavaScript

sanju wrote on 01 jul 2008 in comp.lang.javas cript:

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)

**SAM** · Jul 1 '08, 08:45 AM

Re: Randomize HTML Table Rows from JavaScript

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.mozil la.org/en/docs/DOM:table>
<http://developer.mozil la.org/en/docs/DOM:element.clo neNode>
- random the array
<http://javascript.abou t.com/library/blsort2.htm>
- exchange each table's row with the array's item of same index
<http://developer.mozil la.org/en/docs/DOM:element.rep laceChild>

<script type="text/javascript">
function tableRowsRandom (myTable) {
var T = document.getEle mentById(myTabl e);
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.rep laceChild(R[i],T[i]);
}
}
function randOrd(){ return (Math.round(Mat h.random())-0.5); }
</script>

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

--
sm

**Thomas 'PointedEars' Lahn** · Jul 1 '08, 09:35 AM

Re: Randomize HTML Table Rows from JavaScript

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</codewas 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.insertBef ore(rows[i], rows[prng_int(len)]);
}
}
}
}

<body onload="bodyLoa d()">

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>

**sanju** · Jul 1 '08, 09:55 AM

Re: Randomize HTML Table Rows from JavaScript

On Jul 1, 2:30 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.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</codewas 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.insertBef ore(rows[i], rows[prng_int(len)]);
}
}
}
}
>
<body onload="bodyLoa d()">
>

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

**sanju** · Jul 1 '08, 09:55 AM

Re: Randomize HTML Table Rows from JavaScript

On Jul 1, 2:54 pm, sanju <sdhera...@gmai l.comwrote:

On Jul 1, 2:30 pm, Thomas 'PointedEars' Lahn <PointedE...@we b.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</codewas 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.insertBef ore(rows[i], rows[prng_int(len)]);
}
}
}
}

>

>

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

**Jorge** · Jul 1 '08, 05:45 PM

Re: Randomize HTML Table Rows from JavaScript

On Jul 1, 11:30 am, Thomas 'PointedEars' Lahn <PointedE...@we b.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</codewas 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.insertBef ore(rows[i], rows[prng_int(len)]);
}
}
}
}
>
<body onload="bodyLoa d()">
>

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

var tbody= (document.getEl ementById('myTa ble')).tBodies[0],
rows= tbody.rows, i;
for (i= rows.length; i; i--) {
tbody.appendChi ld(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.

**Dr J R Stockton** · Jul 1 '08, 10:45 PM

Re: Randomize HTML Table Rows from JavaScript

In comp.lang.javas cript message <4869F931.10402 08@PointedEars. de>, Tue,
1 Jul 2008 11:30:25, Thomas 'PointedEars' Lahn <PointedEars@we b.de>
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.demo n.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)

**Dr J R Stockton** · Jul 1 '08, 10:45 PM

Re: Randomize HTML Table Rows from JavaScript

In comp.lang.javas cript message <4869ee29$0$876 $ba4acef3@news. orange.fr>
, Tue, 1 Jul 2008 10:43:20, SAM <stephanemoriau x.NoAdmin@wanad oo.fr.inva
lidposted:

R.sort(randOrd) ;

>function randOrd(){ return (Math.round(Mat h.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.c om/faq/index.html>.
<URL:http://www.merlyn.demo n.co.uk/js-index.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.

**SAM** · Jul 2 '08, 12:15 AM

Re: Randomize HTML Table Rows from JavaScript

Jorge a écrit :

On Jul 1, 11:30 am, Thomas 'PointedEars' Lahn <PointedE...@we b.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.getEl ementById('myTa ble')).tBodies[0],
rows= tbody.rows, i;
for (i= rows.length; i; i--) {
tbody.appendChi ld(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

**Jorge** · Jul 2 '08, 02:45 AM

Re: Randomize HTML Table Rows from JavaScript

On Jul 2, 2:10 am, SAM <stephanemoriau x.NoAd...@wanad oo.fr.invalid>
wrote:

Jorge a écrit :

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 ?

__Hopefully__ no : http://tinyurl.com/68hscr

--Jorge.

**Thomas 'PointedEars' Lahn** · Jul 2 '08, 08:45 AM

Re: Randomize HTML Table Rows from JavaScript

Jorge wrote:

Thomas 'PointedEars' Lahn 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</codewas 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.insertBef ore(rows[i], rows[prng_int(len)]);
> }
> }
> }
> }
>>
> <body onload="bodyLoa d()">

>
Hmmm, this code shuffles the rows in just 4 lines :
>
var tbody= (document.getEl ementById('myTa ble')).tBodies[0],
rows= tbody.rows, i;
for (i= rows.length; i; i--) {
tbody.appendChi ld(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)

Obviously your different solution is not equivalent to mine, so these
benchmark results are void for comparing appendChild() and insertBefore().
What happens if you do the same feature-testing, lose extra parentheses,
and implement the same Opera PRNG fix?

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Randomize HTML Table Rows from JavaScript

Randomize HTML Table Rows from JavaScript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment