Question

18

Creating a dynamic grid of divs with Javascript

rated 0 times [ 24] [ 6] / answers: 1 / hits: 40107 / 12 Years ago, mon, june 18, 2012, 12:00:00

I want to create a grid of HTML divs that will have the same number of rows and columns
but with the number of rows/columns being based on a particular number
that would be passed to the Javascript function.

e.g. if the number is 3 the grid will be 3 rows and 3 columns

if the number is 4 the grid will be 4 rows and 4 columns..etc

in the case of 3 the outputted code would need to look something like:

<div class=row>

  <div class=gridsquare>1</div>

  <div class=gridsquare>2</div>

  <div class=gridsquare>3</div>

</div>

<div class=row>

  <div class=gridsquare>4</div>

  <div class=gridsquare>5</div>

  <div class=gridsquare>6</div>

</div>

<div class=row>

  <div class=gridsquare>7</div>

  <div class=gridsquare>8</div>

  <div class=gridsquare>9</div>

</div>

What is a good way of iterating through javascript so that the correct elements
can be identified to add the row div opening or closing tags (?)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nestorjarettg

Add To Favorites

Follow

Total Points: 451

Total Questions: 108

Total Answers: 108

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

nestorjarettg questions

1 Discord Bot Not Playing Audio discord.js v13

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Access and modify react context from jest test with react testing library

Wed, Sep 9, 20, 00:00, 4 Years ago

1 Uncaught ReferenceError: _ is not defined at < anonymous>:1:1 (Not jQuery)

Sun, Feb 16, 20, 00:00, 4 Years ago

1 403 Access Error returned from Browser possibly caused by AWS

Wed, Jan 29, 20, 00:00, 4 Years ago

1 Uncaught TypeError: Class extends value #< Object> is not a constructor or null

Mon, Jan 13, 20, 00:00, 4 Years ago

View All

answered 12 Years ago xiomara · Accepted Answer

Something along these lines should work for ya.

<html><head> 

  <script language=javascript> 

    function genDivs(v){ 

      var e = document.body; // whatever you want to append the rows to: 

      for(var i = 0; i < v; i++){ 

        var row = document.createElement(div); 

        row.className = row; 

        for(var x = 1; x <= v; x++){ 

            var cell = document.createElement(div); 

            cell.className = gridsquare; 

            cell.innerText = (i * v) + x;

            row.appendChild(cell); 

        } 

        e.appendChild(row); 

      } 

      document.getElementById(code).innerText = e.innerHTML;



    }

  </script> 

</head> 

<body> 

    <input type=button onclick=genDivs(6) value=click me> 

    <code id=code></code>

</body> 

</html>

Results:

  <div class=row>

    <div class=gridsquare>

      1

    </div>



    <div class=gridsquare>

      2

    </div>



    <div class=gridsquare>

      3

    </div>



    <div class=gridsquare>

      4

    </div>



    <div class=gridsquare>

      5

    </div>



    <div class=gridsquare>

      6

    </div>

  </div>



  <div class=row>

    <div class=gridsquare>

      7

    </div>



    <div class=gridsquare>

      8

    </div>



    <div class=gridsquare>

      9

    </div>



    <div class=gridsquare>

      10

    </div>



    <div class=gridsquare>

      11

    </div>



    <div class=gridsquare>

      12

    </div>

  </div>



  <div class=row>

    <div class=gridsquare>

      13

    </div>



    <div class=gridsquare>

      14

    </div>



    <div class=gridsquare>

      15

    </div>



    <div class=gridsquare>

      16

    </div>



    <div class=gridsquare>

      17

    </div>



    <div class=gridsquare>

      18

    </div>

  </div>



  <div class=row>

    <div class=gridsquare>

      19

    </div>



    <div class=gridsquare>

      20

    </div>



    <div class=gridsquare>

      21

    </div>



    <div class=gridsquare>

      22

    </div>



    <div class=gridsquare>

      23

    </div>



    <div class=gridsquare>

      24

    </div>

  </div>



  <div class=row>

    <div class=gridsquare>

      25

    </div>



    <div class=gridsquare>

      26

    </div>



    <div class=gridsquare>

      27

    </div>



    <div class=gridsquare>

      28

    </div>



    <div class=gridsquare>

      29

    </div>



    <div class=gridsquare>

      30

    </div>

  </div>



  <div class=row>

    <div class=gridsquare>

      31

    </div>



    <div class=gridsquare>

      32

    </div>



    <div class=gridsquare>

      33

    </div>



    <div class=gridsquare>

      34

    </div>



    <div class=gridsquare>

      35

    </div>



    <div class=gridsquare>

      36

    </div>

  </div>