How to display a jQuery and Javascript generated 2 dimensional array in HTML?

Question

I am trying to create a table of 100 random numbers, the random numbers are from 0 to 100. I need to display the 100 random numbers as a 10 by 10 matrix in HTML, using JS and jQuery. The code that I have been working on displays the last array 10 times. Here is the code:

<html>
    <head>
        <title>My Web Page</title>
        <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js" />
        </script>
    </head>
    <body>
        <h1 id = "randData">Randomize Data</h1>
        <button id = "myRandomizeBtn">Randomize</button>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </body>
    <script type="text/javascript">
    $("#myRandomizeBtn").bind("click",randomizeHandler);
    function randomizeHandler(evt)
    {
        var n = 10;
        var data = new Array();
        for (var i = 0; i < n; i++)
        {
            for (var j = 0; j < n; j++)
            {
                data[i,j] = Math.floor(100*Math.random());
                $("p").text(data);
            }
            $("br").text(data);
        }
    }
    </script>
</html>

I'm not very good with jQuery either, but wouldn't it be easier to use a table? — markasoftware
– markasoftware, Commented Oct 9, 2012 at 3:07

sachleen · Accepted Answer · 2012-10-09 03:15:22Z

2

I don't really understand how you're printing out the data right now.. you can't set the text attribute of a br.

The way you have it right now, $('p') will select ALL p elements on the page. You can use the .eq() function to select the i-th p element (one for each row) and set its text content.

Demo

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

function randomizeHandler(evt)
{
  var n = 10;
  var data = [];
  for (i=0; i<n; i++)
  {
    data[i] = [];
    for (j=0; j<n; j++)
    {
      data[i][j] = Math.floor(100*Math.random());
    }
    $("p").eq(i).text(data[i]);
  }
}

edited Oct 9, 2012 at 3:15

answered Oct 9, 2012 at 3:09

sachleen

31.2k8 gold badges82 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1730439 Over a year ago

your code is displaying the last element in each row of the matrix. we still need to display the whole 10x10 matrix.

sachleen Over a year ago

It displays the 10x10, check the demo. data[i] is an array of numbers, it prints the whole array in each p element.

JNo · Accepted Answer · 2012-10-09 03:09:01Z

1

Added:

data[i] = new Array();

Modified:

data[i][j] = Math.floor(100*Math.random());

   function randomizeHandler(evt)
    {
            var n = 10;
            var data = new Array();
            for (i=0; i<n; i++)
            {
                    data[i] = new Array();
                    for (j=0; j<n; j++)
                    {
                            data[i][j] = Math.floor(100*Math.random());
                            $("p").text(data);
                    }
                    $("br").text(data);
            }
    }

I don't understand this lines:

$("p").text(data);

$("br").text(data);

If you want access to cell in table, use data[i][j].

answered Oct 9, 2012 at 3:09

JNo

4573 silver badges11 bronze badges

Comments

hagensoft · Accepted Answer · 2012-10-09 04:03:05Z

Maybe this is what your looking for,

css...

    table {
        font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 320px;
        }

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

html...

    <head>        
    </head>
    <body>
        <div id='mydiv'></div>
        <button id = "myRandomizeBtn">Randomize</button> 
    </body>

javascript....

$("#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 = 2;  
var data;    

for (i=0; i<n; i++)
{
    row=document.createElement('tr');
    for(var j=0;j<n;j++){
        cell=document.createElement('td');
        data = Math.floor(100*Math.random()); 
        cell.appendChild(document.createTextNode(data));
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}

here's a link...
http://jsfiddle.net/ZzuHt/

hope it helps...

Roger · Accepted Answer · 2012-10-09 04:16:30Z

0

Here a working example: http://jsfiddle.net/VGdpJ/

I think your problem is here:

data[i,j] which should be ---> data[i][j]

You are not really making a 2d array like that.

You need to also declare that your element at data[i] is an array (just for safety, not really necessary). i.e.

data[i] = [];

You are also making this:

$("p") which is equal to document.getElementsByTagName("p");

Which result is an array of all the p tags!!! That's why all p tags have the same text.

Fooling around with styles :P http://jsfiddle.net/VGdpJ/1/

edited Oct 9, 2012 at 4:16

answered Oct 9, 2012 at 3:35

Roger

2,9624 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to display a jQuery and Javascript generated 2 dimensional array in HTML?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related