CODEWITHSUNDEEP
javascript
Peter Galik
Peter Galik

Reputation: 3

How to put the elements of array of arrays in table cells?

<html>
<head>
<title>Array of Arrays</title>
<script type="text/javascript">
function matrix()
{
var e=prompt("Cols?",0);
var f=prompt("Rows?",0);
var matrix = new Array();
for (var i=0;i<e;i++) 
    {
    matrix[i] = new Array();
    for (var j=0;j<f;j++) 
        {
        matrix[i][j]=Math.floor((Math.random()*1000)+1);
        }
    }
for (var i=0; i<=e-1; i++)
    {
    document.getElementById("keret").innerHTML= 
    document.getElementById("keret").innerHTML+"<tr>";
    for (var j=0; j<=f-1; j++)
        {
        document.getElementById("keret").innerHTML= 
        document.getElementById("keret").innerHTML+"<td>"+matrix[i][j]+"</td>";
        }
    document.getElementById("keret").innerHTML= 
    document.getElementById("keret").innerHTML+"</tr>";

    }
document.getElementById("keret").innerHTML= 
document.getElementById("keret").innerHTML+"</table>";
}
</script>
</head>
<body onload="matrix()">
<table border="1" id="keret">
</body>
</html>

This script makes a user defined array of arrays, and filling it up with random numbers. My problem is: I can't make the script to put the values in dividual cells.

Upvotes: 0

Views: 225

Answers (2)

Anthony
Anthony

Reputation: 599

<html>
<head>
    <title>Array of Arrays</title>
    <script type="text/javascript">
        function matrix() {
            var e = prompt("Cols?",0),
            f = prompt("Rows?",0),        
            allRows = [],
            row = [];

            for (var i = 0; i < e; i += 1) {
                row = ['<tr>', '</tr>'];  // this serves as your initial template

                for (var j = 0; j < f; j += 1) {
                    // now create the columns
                    row.splice(-1, 0, '<td>' + Math.floor((Math.random()*1000)+1) + '</td>')
                }

                allRows.push(row.join(''));
            }

            document.getElementById("keret").innerHTML = allRows.join('');
        }
    </script>
</head>
<body onload="matrix()">
    <table border="1" id="keret"></table>
</body>
</html>

Upvotes: 0

VLS
VLS

Reputation: 2346

Your second loop can be as follows:

for (var i = 0; i < e; i++) {
    var row = document.createElement("tr"); 
    for (var j = 0; j < f; j++) {
        var cell = document.createElement("td");
        cell.innerHTML = matrix[i][j];
        row.appendChild(cell);
    }
    document.getElementById("keret").appendChild(row);
}

This appends a tr element for each row and a td element for each column within the row. Then it appends the row to your table. Your HTML would be slightly modified as well:

<table border="1" id="keret"></table>

(Rows & Columns prompts need to be switched but I didn't want to mess up your variable names).

Fiddle: http://jsfiddle.net/verashn/7Rwnc/

Upvotes: 1

Related Questions