Randomize HTML Table Rows from JavaScript

Discussion in 'Javascript' started by sanju, Jul 1, 2008.

  1. sanju

    sanju Guest

    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
    sanju, Jul 1, 2008
    #1
    1. Advertising

  2. sanju

    Evertjan. Guest

    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)
    Evertjan., Jul 1, 2008
    #2
    1. Advertising

  3. sanju

    SAM Guest

    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>

    --
    sm
    SAM, Jul 1, 2008
    #3
  4. 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, 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>
    Thomas 'PointedEars' Lahn, Jul 1, 2008
    #4
  5. sanju

    sanju Guest

    On Jul 1, 2:30 pm, 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</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()">
    >
    > > 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, 2008
    #5
  6. sanju

    sanju Guest

    On Jul 1, 2:54 pm, sanju <> wrote:
    > On Jul 1, 2:30 pm, 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</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()">

    >
    > > > 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
    sanju, Jul 1, 2008
    #6
  7. sanju

    Jorge Guest

    On Jul 1, 11:30 am, 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</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.
    Jorge, Jul 1, 2008
    #7
  8. 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.
    Dr J R Stockton, Jul 1, 2008
    #8
  9. 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)
    Dr J R Stockton, Jul 1, 2008
    #9
  10. sanju

    SAM Guest

    Jorge a écrit :
    > On Jul 1, 11:30 am, 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?

    >
    > 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
    SAM, Jul 2, 2008
    #10
  11. sanju

    Jorge Guest

    On Jul 2, 2:10 am, SAM <>
    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.
    Jorge, Jul 2, 2008
    #11
  12. 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</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
    --
    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
    Thomas 'PointedEars' Lahn, Jul 2, 2008
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Subba Rao via DotNetMonster.com

    script for moving rows up and down and traverse thru rows of HTML table

    Subba Rao via DotNetMonster.com, Mar 19, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    8,226
    Subba Rao via DotNetMonster.com
    Mar 19, 2005
  2. Rio
    Replies:
    4
    Views:
    1,184
  3. Badass Scotsman

    Why wont this Randomize? (Classic VB Script ASP)

    Badass Scotsman, May 5, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    514
    =?ISO-8859-1?Q?G=F6ran_Andersson?=
    May 5, 2006
  4. Gaffer

    Randomize HTML

    Gaffer, May 4, 2004, in forum: Javascript
    Replies:
    3
    Views:
    177
  5. T.G.
    Replies:
    2
    Views:
    1,067
Loading...

Share This Page