473,387 Members | 1,575 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Randomize HTML Table Rows from JavaScript

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
Jul 1 '08 #1
11 5149
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)
Jul 1 '08 #2
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[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
Jul 1 '08 #3
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.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>
Jul 1 '08 #4
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</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.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
Jul 1 '08 #5
On Jul 1, 2:54*pm, sanju <sdhera...@gmail.comwrote:
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</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.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
Jul 1 '08 #6
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</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.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.
Jul 1 '08 #7
In comp.lang.javascript message <48**************@PointedEars.de>, Tue,
1 Jul 2008 11:30:25, Thomas 'PointedEars' Lahn <Po*********@web.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.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)
Jul 1 '08 #8
In comp.lang.javascript message <48*********************@news.orange.fr>
, Tue, 1 Jul 2008 10:43:20, SAM <st*********************@wanadoo.fr.inva
lidposted:
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.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 1 '08 #9
SAM
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
Jul 2 '08 #10
On Jul 2, 2:10*am, SAM <stephanemoriaux.NoAd...@wanadoo.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.
Jul 2 '08 #11
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.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)
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
Jul 2 '08 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Gaffer | last post by:
Hello Is there a way in which I can make certain parts of Html on my website random so that each viewer will see different material if they refresh the page or come back onto the website later?...
1
by: v_verno | last post by:
Good day, I have a web page that shows info retrieved from a MySQL db and I would like to convert all these data into an .XLS file. Have searched the net high and low but seems that I'm unable to...
1
by: anonieko | last post by:
This example applies to javascript, table, cells, rows > > How do you access rows and columns of a HTML table? > > > <script language="javascript"> alert('start');
0
by: Subba Rao via DotNetMonster.com | last post by:
---------------------------HTML---------------------------------------- <html> <head> <title>:: DHTML Table Demo ::</title> <script langauge="javascript" src="InterchangeRows.js"></script>...
6
by: Ashok | last post by:
Hi, I am starting a new project to build a software product using APS.NET 2.0. In past I have used "frameset" and "frame" to build pages. My current requirements I have coded using frameset and...
6
by: mrtaka79 | last post by:
Okay, first of all, I'm a complete noob, so go easy on me. I have this code that works perfectly for me. The only thing I want to add is to randomize the pictures/links that show up. Can anyone...
2
by: sarafat | last post by:
greetings people I am new to Ajax and javascript, yet i have little time to learn it all. Question is: i am using javascript to create my DOM Table and AJAX that returns a DataSet to my...
3
by: amit | last post by:
Hello group, How can I assign a link with its related elements (as following) to an array element? Assume having a table with several rows and 3 columns. The first column holding some text...
12
by: micky125 | last post by:
Hey guys, another part of program I am stuck at is to create an email storage / reference system. I need the first line to hold the basic info, from to address etc and then a second row to store the...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.