使用JavaScript创建一个3 X 3的网格/ jquery

-2

我有一个名为box的div类，这个div形成一个square.I想重复这个div以形成一个3 X 3的网格。我该如何做到这一点for循环在JavaScript/jQuery中？使用JavaScript创建一个3 X 3的网格/ jquery

.box { 
    background: #9E9E9E; 
    border:black 1px solid; 
    width: 180px; 
    height:180px; 
    margin:0px auto; 
    margin-top:0px; 
    cursor:pointer; 
    display: inline-block; 
    float: left; 
}

来源

2015-10-05 HarshMakadia

您已经尝试了什么？ –

我试图使用append（），但它不工作！ @sarjan Desai – HarshMakadia

显示应该是：'inline-block'而不是'block-inline' – EaziLuizi

我给你一个起点：

<div class="parent"> 
<div class="toCopy">div that i have to clone</div> 
</div>

$(".toCopy").clone().appendTo(".parent");

结果：

<div class="parent"> 
<div class="toCopy">div that i have to clone</div> 
<div class="toCopy">div that i have to clone</div> 
</div>

，如果你不上课的名称，您可以遍历使用jQuery遍历DOM ：https://api.jquery.com/category/traversing/

无论如何，我建议你检查API的操作部：https://api.jquery.com/category/manipulation/

来源

2015-10-05 11:09:10

感谢@Drway这个工程，但是这不会创建3 X 3的网格。我如何使用多个for循环形成该结构。 – HarshMakadia

我知道，我只是给你克隆的解决方案。你必须嵌套2，这很简单。如果你不能，我会给你解决方案。 – 2015-10-05 12:28:21

你想是这样的：

http://jsfiddle.net/sqz75b9g/8/

HTML

<div class="rows"> 
    <div class="row0"></div> 
    <div class="row1"></div> 
    <div class="row2"></div> 
</div>

jQuery代码：

$(function() { 
    for(var row=0;row<3;row++) 
    { 
     for(var col=0;col<3;col++) 
     { 
      $(".row"+row).append("<div class='box'></div>"); 
     } 
    } 
})

来源

2015-10-05 11:23:32 vijayP

下面是一个简单的（应该是容易理解的）解决方案，将其更改为您根据自己的需要希望：

注：在未来得不到你的问题下投票请按照下列links。 ..

CSS：

.box { 
     background: #9E9E9E; 
     border: black 1px solid; 
     width: 180px; 
     height: 180px; 
     margin: 0 auto; 
     margin-top: 0; 
     cursor: pointer; 
     display: inline-block; 
     float: left; 
    } 

    .row { 
     display: block; 
     float:left; 
     width:100%; 
    }

JS：

function makeBlocks() { 
     for (var i = 0; i < 3; i++) { 
      var row = document.createElement('div'); 
      row.className = "row"; 
      for (var j = 0; j < 3; j++) { 
       var box = document.createElement('div'); 
       box.className = "box"; 
       row.appendChild(box); 
      }     
      document.getElementById('boxParent').appendChild(row); 
     } 
    }

HTML：

<div> 
    <div id="boxParent"></div> 
</div> 
<div> 
    <button onclick="makeBlocks();">MAKE BLOCKS</button> 
</div>

编辑： 这里有一个JSFiddle链接

来源

2015-10-05 11:24:48 EaziLuizi

使用JavaScript创建一个3 X 3的网格/ jquery

回答

相关问题