Randomize HTML Table Rows from JavaScript

#1

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

#2

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

Quote:

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)

#3

sanju a écrit :

Quote:

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

#4

sanju wrote:

Quote:

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()">

Quote:

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>

#5

On Jul 1, 2:30*pm, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de>
wrote:

Quote:

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

#6

On Jul 1, 2:54*pm, sanju <sdhera... (AT) gmail (DOT) com> wrote:

Quote:

On Jul 1, 2:30*pm, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) 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

#7

On Jul 1, 11:30*am, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de>
wrote:

Quote:

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.

#8

In comp.lang.javascript message <4869ee29$0$876$ba4acef3 (AT) news (DOT) orange.fr>
, Tue, 1 Jul 2008 10:43:20, SAM <stephanemoriaux.NoAdmin (AT) wanadoo (DOT) fr.inva
lid> posted:

Quote:

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.

#9

In comp.lang.javascript message <4869F931.1040208 (AT) PointedEars (DOT) de>, Tue,
1 Jul 2008 11:30:25, Thomas 'PointedEars' Lahn <PointedEars (AT) web (DOT) de>
posted:

Quote:

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)

#10

Jorge a écrit :

Quote:

On Jul 1, 11:30 am, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) 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 :-(

Quote:

9.97/100 ms (Thomas)

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

Quote:

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