Question

你能帮助我们如何使用循环使用javascript并排添加Divs，这里有两列和六行。我尝试了以下代码，

for(var i=0;i<2;i++) {
    for(var j=0;j<5;j++) {
        document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" />')+"\n";    
    }
}

Answer 1

HTML：

<div id="table"></div>

JS：

var newdiv;
for(var i=0;i<2;i++) {
    for(var j=0;j<6;j++) {
        newdiv=document.createElement("div");
        newdiv.style.width = '80px';
        newdiv.style.height = '80px';
        newdiv.style.border = '1px solid red';
        newdiv.style.float = 'left';
        document.getElementById('table').appendChild(newdiv);    
    }
    newdiv=document.createElement("div");
    newdiv.style.clear = 'both';
    document.getElementById('table').appendChild(newdiv);
}

Answer 2

我认为您已将"\n"添加到错误的位置。

 document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" />'+"\n");

经过测试的代码： -

function CreateDiv()
{
for(var i=0;i<2;i++) {
        for(var j=0;j<5;j++) {
            document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" >Hi</div>');  
        }
    }
}

Answer 3

试试这个

http://jsfiddle.net/DsqMj/4/

HTML

<div id="table"></div>

CSS

#table .box {
width: 100px;
height: 30px;
background-color: #ccc;
}
#table .box:nth-child(even) {
background-color: #eee;
}
#table .col {
width:100px;
border: 1px solid #aaa;
float: left;
}

JS

makeTable();

function makeTable() {
var table = document.getElementById("table");
var row ='';

for(var i=0;i<2;i++) 
{    
    for(var j=0;j<6;j++) 
    {
        row += "<div class='box'></div>";
    }
    table.innerHTML += "<div class='col'>"+row+"</div>";
    row ='';
}
}

Answer 4

看起来很有效，请看一下：http://jsfiddle.net/fCSTp/1/

var i = 0, div,
    node = document.createElement("div"),
    main = document.getElementById("main");

while (6 > i++) {
    div = node.cloneNode(true);
    div.innerHTML = i;
    div.style.cssText = "width:200px;height:20px;float:left;border:1px solid red";
    main.appendChild(div);
}

delete node;
delete div;

Answer 5

在每行的末尾插入<br style="clear:both"/>：

for(var i=0;i<2;i++) {
    for(var j=0;j<5;j++) {
        document.write('<div style="width:200px;height=200px;border:1px solid red;float:left" />')+"\n";    
    }
    document.write('<br style="clear:both"/>');
}

如何使用循环使用javascript动态地并排追加Divs？

5 个答案: