html - Creating a dynamic grid of divs with Javascript

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 (?)

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 (?)

Share Improve this question asked Jun 18, 2012 at 12:55 Rowan 4633 gold badges8 silver badges20 bronze badges

Add a comment |

3 Answers 3

Sorted by: Reset to default 11

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>

var n=4;//take grid column value as you want

for(var i = 0; i < n; i++) {
    document.body.innerHTML+='<div class="row">';

    for(j = 0; j < n; j++) {
        document.body.innerHTML+='<div class="gridsquare">' + (i*5+j+1) + '</div>';
    }

    document.body.innerHTML+='</div>';
}

var grd="";
var rowCount=3;
for(var i=0; i<rowCount; i++){
/*here make whole string with row id to make identification of row then

you can select specific row */

}

$(yourelement).append(grd);

I think it will be good way to identify row

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Creating a dynamic grid of divs with Javascript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)