Renaming Variables According to Loop Number

Discussion in 'JavaScript' started by wyrt, Jan 8, 2009.

  1. #1
    Hey, guys. I've got a little thing here where I'm trying to get JS to loop through and set a bunch of variables to some tabled values.

    Doing it for only one variable is really easy. This is no problem - what I need to do is get this to set a bunch of variables.

    When it loops through right now, it alerts the user three times of the same value. What I want is it to alert the user of three different variables (in reality, this script is actually a proof of concept for a much larger scale script, which would do this for several hundred variables).

    This is my script so far!
    <html>
    <head>
    <script type="text/javascript">
    function cell() {
    var i=0;
    for (i=0;i<=2;i++)
    {
    var x=document.getElementById('myTable').rows[0].cells ;
    var row1x1 = (x[1].innerHTML) ;
    alert(" " + row1x1) ;
    }
    }
    </script>
    </head>
    <body>
    
    <table id="myTable" border="1">
    <tr>
    <td>row0</td>
    <td>000</td>
    <td>272</td>
    <td>239</td>
    <td>364</td>
    </tr>
    <tr>
    <td>row1</td>
    <td>000</td>
    <td>246</td>
    <td>239</td>
    <td>334</td>
    </tr>
    <tr>
    <td>row1</td>
    <td>000</td>
    <td>206</td>
    <td>119</td>
    <td>154</td>
    </tr>
    </table>
    <br />
    <input type="button" onclick="cell()" value="Alert first cell">
    
    </body>
    </html>
    Code (markup):
    Something along the lines of "row"+loop number+"x1" is what I'm shooting for. The aim is to return a predictable variable name, which in this case should be "row0x1". The importance of the predictable variable name cannot be stretched enough - these variables have to be used again at another point.

    Anybody who would share an idea as to how this would be accomplished will be highly appreciated! Thank you in advance. And also thanks to anybody who takes time to read this in the first place :)
     
    wyrt, Jan 8, 2009 IP
  2. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #2
    So you essentially want to end up with a multidimensional array?

    You could make it simple and do

    
    var current_row = 0;
    var current_col = 3;
    var current_cell = "cells value here";
    eval("row"+current_row+"col"+current_col+" = '"+current_cell+"'");
    alert(row0col3);
    
    Code (markup):
    this would make whatever the loop generate the variable

    row0col3

    with the value of, whatever is in the cell in row 0 column 3


    if that doesnt give you a good enough idea on how it works to run with it, come back and show me how far you got with it

    basically, "eval("stuff")" just acts like the "stuff" is javascript code, and executes it, so if you put in a variable name in there and have a value being set to it, it will create that variable.

    enjoy.
     
    crath, Jan 8, 2009 IP
  3. wyrt

    wyrt Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you for the help... but this isn't exactly what I had in mind. The script was designed to read the table, and this seems to set a variable and read it.

    The variable has to be set to the cell's value, this script is simplified so that I can get the basis bug free before I try and merge it with another script (one that loads the table into the HTML). It is supposedly going to be "dynamic" in a sense. The idea is that we won't have to update the HTML (which can be a pain), and instead use a handy table (which for non-computer geeks is much more user friendly).

    Thanks for looking into this! I'm still having a bit of a tussle getting this to work properly. I think you're on the right track though, I've got a little inspiration from your code to get this working :)
     
    wyrt, Jan 13, 2009 IP
  4. wyrt

    wyrt Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Wait... I must have my stupid hat on today. I see what you were doing now :/

    ok, it works! danke, Crath!

    Small issue, might as well post it:
    Doesn't like to alert on loop... weirdo thing just won't do it.

    
    <script type="text/javascript">
    function cell() {
    var i=0;
    for (i=0;i<=2;i++)
    {
    var current_row = 0+i
    var current_col = 0+i
    
    var x=document.getElementById('myTable').rows[0+i].cells ;
    var current_cell = (x[0+i].innerHTML) ;
    
    eval("row"+current_row+"col"+current_col+" = '"+current_cell+"'");
    alert(row0col0) ;
    alert(row1col1) ;
    }
    }
    </script>
    
    Code (markup):
    It works great, except that the second "alert" won't go...

    Thanks guys, sorry about the mess up. I'll put the hat away now (I thought I threw it out...)
     
    wyrt, Jan 13, 2009 IP
  5. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #5
    you have it setting i to both the row and col counter, so its only going to check

    row1col1, row2col2, and row3col3

    but you are alerting, row1col1 so it should be giving you at least one alert.

    any errors or warnings?
     
    crath, Jan 13, 2009 IP
  6. astupidname

    astupidname Peon

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    One thing I would comment on, is you should try to stay away from eval(), and at the very least if you must use it be careful, as in the current context you are using it you are creating implied global variables (which could wind up being like, hundreds of them according to you?).

    Another way you could go about, if I understand your intentions correctly, is store all the var's in an object:
    <html>
    <head>
    <script type="text/javascript">
    
    function allCells(tbl) {
        var myObject = {};
        var tblRows = document.getElementById(tbl).rows; 
        var rowCells, i, str = '', prop;
        for (i = 0; i < tblRows.length; i++) {
            rowCells = tblRows[i].cells;
            for (var j = 0; j < rowCells.length; j++) {
                myObject['row'+i+'_cell'+j] = rowCells[j].innerHTML;
            }
        }
        //now you have a myObject {} object which is filled with 
        //properties and values, and is portable, passable to another function if needed
        //or make myObject global, whatever
        //let's have a look at it's properties and values:
        for (prop in myObject) {
            str += prop + " : "+myObject[prop]+"\n";
        }
        alert('myObject.row0_cell1: '+myObject.row0_cell1);
        alert('myObject.row2_cell3: '+myObject.row2_cell3);
        alert(str);
    }
    
    </script>
    </head>
    <body>
    <table id="myTable" border="1">
    <tr>
    <td>row0</td>
    <td>000</td>
    <td>272</td>
    <td>239</td>
    <td>364</td>
    </tr>
    <tr>
    <td>row1</td>
    <td>000</td>
    <td>246</td>
    <td>239</td>
    <td>334</td>
    </tr>
    <tr>
    <td>row2</td>
    <td>000</td>
    <td>206</td>
    <td>119</td>
    <td>154</td>
    </tr>
    </table>
    <br />
    <button type="button" onclick="allCells('myTable');">Alert all cells stored in myObject{}</button>
    </body>
    </html>
    HTML:
     
    astupidname, Jan 13, 2009 IP
  7. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #7
    hmm, thanks for teaching me a thing or two :)
     
    crath, Jan 13, 2009 IP