Displaying 2d Array onto a table? Javascript

Question

I am creating a 2d array with user input. How can I display the input on to a 3 by 3 table?

<script language = javascript>
var b = [];
for(var i=0; i<3; i++){
b[i] = [];
for(var j=0; j<3; j++){
b[i][j] = window.prompt("b["+(i+1)+","+(j+1)+"] = ?");
}
}
</script>
</head>
<body>
<table width="80%" border="2" cellspacing="0" cellpadding="0">
  <tr>
<td> </td>
<td>&nbsp;</td>
<td>&nbsp;</td>
 </tr>
 <tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

How do you want to generate the HTML? DOM API or string + .`innerHTML`? — Halcyon, Oct 30 '13 at 16:56
Can you post table structure clearly? What you mean in 3by3 table? — HILARUDEEN S ALLAUDEEN, Oct 30 '13 at 16:59

Bharath R · Accepted Answer · 2013-10-30T18:18:29.267

2

You can do something like this..

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 320px;
    }

td {
    border: 1px solid #CCC;
    padding: 0 0.5em;
    }


</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>

$(document).ready(function(){



$("#myRandomizeBtn").bind("click",randomizeHandler); 

function randomizeHandler(evt){     
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
var n = 3;  
var data;    

for (i=0; i<n; i++)
{
    row=document.createElement('tr');
    for(var j=0;j<n;j++){
        cell=document.createElement('td');
        data =window.prompt("b["+(i+1)+","+(j+1)+"] = ?"); 
        cell.appendChild(document.createTextNode(data));
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);




   }  



});
</script>
</head>
<body>
    <div id='mydiv'></div>
    <button id = "myRandomizeBtn">Randomize</button> 
</body></html>

here is a working fiddle

edited Oct 30 '13 at 18:18

answered Oct 30 '13 at 17:01

Bharath R

1,481
1
11
23

seems to work when i run from fiddle, but when i run it from notepad++ cant get it to work, any ideas?? – Jessica Oct 30 '13 at 17:47
I haven't checked it , try using console and debug the errors – Bharath R Oct 30 '13 at 18:10
I edited my answer check this for complete html file. – Bharath R Oct 30 '13 at 18:19
just one question, sorry new to javascript.. what does this line do – Jessica Oct 30 '13 at 18:50
That will load the jQuery , which will enable usage of $ – Bharath R Oct 31 '13 at 04:38

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

You can use following code to traverse and push value

var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop

       col.innerText = b[i][j]; //Set your value here   
   }  
}

Working Demo

Reference for Traversing from @John Hartsock answer at How do I iterate through table rows and cells in javascript?

edited May 23 '17 at 10:32

Community

1
1

answered Oct 30 '13 at 17:01

Satpal

126,885
12
146
163

I want to put element b [0][0] in the first row how would i do that?? – Jessica Oct 30 '13 at 17:10
@Jessica, there it is. Have you seen demo – Satpal Oct 30 '13 at 17:14
Im looking at the demo but its not displaying the table with the values I enter – Jessica Oct 30 '13 at 17:18

Displaying 2d Array onto a table? Javascript

2 Answers2