2-dimensional array table

[techyworld]

Hi can someone help? I'm creating a 2 dimensional Array with a table but its not displaying anything. why this?

var totalRows = new Array(10);

function drawTable() {
    var div1 = document.getElementById('div1');
    var tbl = document.createElement("table");
 // creating rows
        for (var i = 0; i < totalRows.length; i++) {
            var row = document.createElement("tr");
            totalRows[i]=new Array();
         // create cells in row
             for (var j = 0; j < totalRows.length; j++) {
                var cell = document.createElement("td");

                totalRows[i][j]=0;

                row.appendChild(cell);

            }           

            tbl.appendChild(row); 
        }

        div1.appendChild(tbl); 


}

[radhakrishna.p]

yeah i think

you have created table without applying any styles so that eventhough it is created thats not visible to us

apply some styles to table and add it to the div firstly then start creating the rows and columns as follows

replcae with this modified code in to your script code

<script type="text/javascript">
    var totalRows = new Array(10);
   function drawTable() {
    var div_id = document.getElementById('div1');
    var tbl = document.createElement("table");

    tbl.setAttribute("id","table_id") ;
    tbl.setAttribute("border","1") ;

    div_id.appendChild(tbl); 

    var tabl_id  = document.getElementById("table_id");

    for(var i=0;i<totalRows.length;i++){
    var row=document.createElement('tr');
    for(var j=0;j<totalRows.length;j++){
        var cell=document.createElement('td');
                                      cell.setAttribute("width","100px") ; 
                                      cell.setAttribute("height","35px") ; 
                                      cell.innerHTML = "     "+j;                 
         row.appendChild(cell);
    }
    tabl_id.appendChild(row);
    }
}
setTimeout(function(){
       drawTable(); 
    },2000);
</script>

i hope this helps you

happy coding

note: i dont know when you are calling this drawTable() method ,i am just calling this method 2 secs after window is loaded

[techyworld]

you have remove the 2D array. I need to do it with a 2D array :/

[radhakrishna.p]

you may proceed with your actual requirement requirement i am just saying that what it will be like for your table creation and its design part only

thats it

[techyworld]

you have remove the 2D array. I need to do it with a 2D array :/

[techyworld]

Ok now it displays. But now i want to retrieve every 3 elements in rows and push it in another array. for Ex:retrieve array index
[0,1,2]
[1,2,3]
[2,3,4]
[5,6,7]
[8,9,10] it goes on like this for all rows. Can someone help?

function drawTable() {
        var div_id = document.getElementById('div1');
        var tbl = document.createElement("table");
        tbl.setAttribute("id","table_id") ;
        tbl.setAttribute("border","1") ;
        div_id.appendChild(tbl);
        var tabl_id = document.getElementById("table_id");

        for(var i=0;i<5;i++){
            var row=document.createElement('tr');
            totalRows[i]= new Array();
            for(var j=0;j<10;j++){
                var cell=document.createElement('td');
                cell.setAttribute("width","100px") ;
                cell.setAttribute("height","35px") ;
                cell.innerHTML = "     "+j; 

                row.appendChild(cell);
            }
        tabl_id.appendChild(row);

        }
    }

[radhakrishna.p]

its work perfectly on my side (10 rows and 10 cols)

please look at line 16 in the above post

i have set the loop upto totalRows.length only

check that loop on your side

happy coding

[techyworld]

Ok it displays now but i want it to be a 10 rows by 10 cols . it displays 10 rows, but the cols are more than 10! How to reduce it?

[techyworld]

    function drawTable() {
        var div_id = document.getElementById('div1');
        var tbl = document.createElement("table");
        tbl.setAttribute("id","table_id") ;
        tbl.setAttribute("border","1") ;
        div_id.appendChild(tbl);
        var tabl_id = document.getElementById("table_id");
        for(var i=0;i<5;i++){
            var row=document.createElement('tr');
            totalRows[i]= new Array();
            for(var j=0;j<10;j++){
                var cell=document.createElement('td');
                cell.setAttribute("width","100px") ;
                cell.setAttribute("height","35px") ;
                cell.innerHTML = " "+j;
                row.appendChild(cell);
            }
            tabl_id.appendChild(row);
        }
    }

But now i want to retrieve every 3 elements in rows and push it in another array. for Ex:retrieve array index
[0,1,2]
[1,2,3]
[2,3,4]
[5,6,7]
[8,9,10] it goes on like this for all rows. Can someone help?