Randomize HTML Table Rows from JavaScript

[sanju]

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

 

[Evertjan.]

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.

 

[SAM]

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 = T.cloneNode(true);
R.sort(randOrd);
for(var i=0; i<n; i++) {
T.parentNode.replaceChild(R,T);
}
}
function randOrd(){ return (Math.round(Math.random())-0.5); }
</script>

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

 

[Thomas 'PointedEars' Lahn]

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, 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

 

[sanju]

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, 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

 

[sanju]

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, rows[prng_int(len)]);
        }
      }
    }
  }

  <body onload="bodyLoad()">

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]

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, 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.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>
, Tue, 1 Jul 2008 10:43:20, SAM <[email protected]
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.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>, Tue,

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.

 

[SAM]

Jorge a écrit :

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?

 

[Jorge]

Jorge a écrit :

Ha Yes ... not so good :-(



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


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]

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, 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)

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