用Javascript创建一个动态的div网格 | 用Javascript创建一个动态的div网格

本文介绍了用Javascript创建一个动态的div网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个HTML div的网格，它具有相同数量的行和列
，但是具有基于特定数字
的行数/列数将传递给Javascript函数。

例如如果数字是3，则网格将是3行和3列如果数字是4，则网格将是4行和4列..等等

在3的情况下，输出的代码需要如下所示：

  < 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>

通过javascript迭代的好方法是什么，以便可以识别正确元素
添加行div打开或关闭标记（？）

解决方案

沿着这些行的东西应该适用于亚。

 < html>< head> 
< script language =javascript> 
函数genDivs（v）{
 var e = document.body; （无论你想追加行到：
 for（var i = 0; i< v; i ++）{
 var row = document.createElement（div）; 
 row.className =row; 
 for（var x = 1; 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 =buttononclick =genDivs（6）value =点击我> 
< code id =code>< / code> 
< / body> 
< / html>

结果：

 < 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>

I want to create a grid of HTML divs that will have the same number of rows and columnsbut with the number of rows/columns being based on a particular numberthat 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 elementscan be identified to add the row div opening or closing tags (?)

解决方案

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>

这篇关于用Javascript创建一个动态的div网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！