0

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); 


}

Edited by techyworld

2
Contributors
8
Replies
10
Views
4 Years
Discussion Span
Last Post by techyworld
0

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

0

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

0

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);

        }
    }

Edited by techyworld

0

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

Edited by radhakrishna.p: giving clarity on the solution

0

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?

0
    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?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.