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

回答

相關問題