Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Randomizing table raws

    I am new in JS and is faced with a problem of randomization of the table rows, without including content of each table row inside JS (I haven't seen this attempted before).

    So far I have the following code (see below) and the problem is that I don't know how to extract data from <tr> and create an array out of them, so then I could randomize them.

    Any kind of tips, pointers, help of any kind will be really truly well appreciated.

    CODE:

    <html>
    <head>
    <title>Random Table Example</title>

    <script language="javascript" type="text/javascript">
    function randomize(id){
    if(document.getElementsByTagName){
    var table = document.getElementById(id);
    var rows = table.getElementsByTagName("tr");
    alert ("Table Raws: " + rows.length);
    var test_it = new Array (rows.length);
    // Assign nothing to each test_it element so rows will not repeat upon being randomized
    for (i=0; i < rows.length; i++){
    test_it[i] = "";
    }

    for (i=0; i < rows.length; i++){
    // => rows[i] = get.childnode; // How do I get content of everything inside <tr>? and create an array out of it?
    }

    for(i = 0; i < rows.length; i++){
    rndm = Math.round(Math.random() * rows.length)
    if (test_it[rndm] == "")
    {
    test_it[rndm] = rows[rndm] // content of the array should be here
    hits += 1
    document.write('<table width="500" align="center"><tr>' + rows[rndm] + '<\/tr><\/table>');
    }
    }}}
    </script>
    </head>

    <body onLoad="randomize('randomtable')">
    <table width="560" border="0" cellpadding="0" cellspacing="2" id="randomtable">
    <tr>
    <td width="227">Row 1 - Black </td>
    <td width="55" bgcolor="#000000">&nbsp;</td>
    <td width="278"><div align="center">Black</div></td>
    </tr>
    <tr>
    <td>Row 2 - Brown </td>
    <td bgcolor="#D47F55">&nbsp;</td>
    <td><div align="center">Brown</div></td>
    </tr>
    <tr>
    <td>Row 3 - Green </td>
    <td bgcolor="#009F00">&nbsp;</td>
    <td><div align="center">Green</div></td>
    </tr>
    <tr>
    <td>Row 4 - Red </td>
    <td bgcolor="#AA0000">&nbsp;</td>
    <td><div align="center">Red</div></td>
    </tr>
    <tr>
    <td>Row 5 - Blue </td>
    <td bgcolor="#009FFF">&nbsp;</td>
    <td><div align="center">Blue</div></td>
    </tr>
    <tr>
    <td>Row 6 - Orange </td>
    <td bgcolor="#FF7F55">&nbsp;</td>
    <td><div align="center">Orange</div></td>
    </tr>
    <tr>
    <td>Row 7 - Purple </td>
    <td bgcolor="#AA00FF">&nbsp;</td>
    <td><div align="center">Purple</div></td>
    </tr>
    <tr>
    <td>Row 8 - Pink </td>
    <td bgcolor="#FF00FF">&nbsp;</td>
    <td><div align="center">Pink</div></td>
    </tr>
    </table>


    </body>
    </html>

  • #2
    New Coder
    Join Date
    Aug 2005
    Location
    Edmonton, Canada
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want the value of a a node use nodeValue (mynode.nodeValue, myNode.childNode.nodeValue, myNode.parentNode.nodeValue, myNode.childNode.nextSibling.nodeValue, etc...), and if you're trying to get the value of an html element use innerHTML and outerHTML.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I would have used cloneNode(true) method...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by ealbrecht
    If you want the value of a a node use nodeValue (mynode.nodeValue, myNode.childNode.nodeValue, myNode.parentNode.nodeValue, myNode.childNode.nextSibling.nodeValue, etc...), and if you're trying to get the value of an html element use innerHTML and outerHTML.
    outerHTML is an IE only method. Both are non-standard. innerHTML is crossbrowser and useful sometimes, but in this case it is not. Mixture of DOM and innerHTML might bring troubles most of the time. cloneNode() will do the job very well in this case
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Here's a cross-browser variant using DOM methods:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    randRows(){
    var 
    rows document.getElementById('randomtable').getElementsByTagName('tr');//the rows' collection
    var clones=[];//the rows' clones
    for(var i=0;i<rows.length;i++){clones[i]=rows[i].cloneNode(true)}
    var 
    root rows[0].parentNode;//the tbody
    var r=[];//random unrepeatable index
    for(var i=0;i<rows.length;i++){
    r[i] = Math.floor(Math.random()*rows.length);
    var 
    comp r[i];
            for(var 
    j=0;j<r.length-1;j++){
                if(
    comp==r[j]){i--;break}
            }
    root.replaceChild(clones[r[i]],rows[i])//replaces the rows with the random indexed clones
    }
    }
    onload=randRows;
    </script>
    </head>
    <body>
    <table width="560" border="0" cellpadding="0" cellspacing="2" id="randomtable">
    <tr>
    <td width="227">Row 1 - Black </td>
    <td width="55" bgcolor="#000000">&nbsp;</td>
    <td width="278"><div align="center">Black</div></td>
    </tr>
    <tr>
    <td>Row 2 - Brown </td>
    <td bgcolor="#D47F55">&nbsp;</td>
    <td><div align="center">Brown</div></td>
    </tr>
    <tr>
    <td>Row 3 - Green </td>
    <td bgcolor="#009F00">&nbsp;</td>
    <td><div align="center">Green</div></td>
    </tr>
    <tr>
    <td>Row 4 - Red </td>
    <td bgcolor="#AA0000">&nbsp;</td>
    <td><div align="center">Red</div></td>
    </tr>
    <tr>
    <td>Row 5 - Blue </td>
    <td bgcolor="#009FFF">&nbsp;</td>
    <td><div align="center">Blue</div></td>
    </tr>
    <tr>
    <td>Row 6 - Orange </td>
    <td bgcolor="#FF7F55">&nbsp;</td>
    <td><div align="center">Orange</div></td>
    </tr>
    <tr>
    <td>Row 7 - Purple </td>
    <td bgcolor="#AA00FF">&nbsp;</td>
    <td><div align="center">Purple</div></td>
    </tr>
    <tr>
    <td>Row 8 - Pink </td>
    <td bgcolor="#FF00FF">&nbsp;</td>
    <td><div align="center">Pink</div></td>
    </tr>
    </table>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •