应用错误收集

Javascript在javascript

时间：2018-01-10 18:16:39

标签： javascript dom

首先我创建了一个带`id=mainC`的div，然后通过javascript我试图制作9个盒子，每3个盒子之后我想要一个换行符并想在框内添加编号。

| 1 | 2 | 3 |

| 4 | 5 | 6 |

| 7 | 8 | 9 |

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
</head>
<style>
#mainC{
    width:300px;
    height:300px;
    position: fixed;
    border:1px solid #000000;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;    
}
.inDiv{
    width:100px;
    height:100px;
    border:1px solid #000000;   
}
</style>
<body>
<div id="mainC">

</div>
</body>
<script>
var mainC = document.getElementById('mainC');
for(var i=1;i<=9;i++)
{
    var inDiv = document.createElement('div');
    inDiv.id = 'inDiv'+i;
    inDiv.className = 'inDiv';
    mainC.appendChild(inDiv);
    if (i%3 === 0)
    {
        document.getElementById('mainC').innerHTML = "<br>";    
    }
}
</script>
</html>

2 个答案:

答案 0 :(得分：0)

您可以使用CSS将其归档：

https://jsfiddle.net/neyk2Le0/2/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
</head>
<style>
#mainC{
    width:306px;
    height:306px;
    position: fixed;
    border:1px solid #000000;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;    
}
.inDiv{
    width:100px;
    height:60px;
    border:1px solid #000000;
    background-color: #ccc;
    float: left;
    text-align: center;
    padding: 40px 0 0 0;
}
</style>
<body>
<div id="mainC">

</div>
</body>
<script>
var mainC = document.getElementById('mainC');
for(var i=1;i<=9;i++)
{
    var inDiv = document.createElement('DIV');
    inDiv.id = 'inDiv'+i;
    inDiv.className = 'inDiv';
    inDiv.appendChild(document.createTextNode(i));
    mainC.appendChild(inDiv);

}
</script>
</html>

答案 1 :(得分：0)

试试这个，

var mainC = document.getElementById('mainC');
for(var i=1;i<=9;i++)
{
    var inDiv = document.createElement('div');
    inDiv.id = 'inDiv'+i;
    inDiv.className = 'inDiv';
    inDiv.innerHTML = i;

    mainC.appendChild(inDiv);
}

CSS

#mainC{
  width:100px;
  display:flex;
  flex-wrap: wrap;
}

#mainC div{
  padding:10px;
  border-left: 1px solid red;
  margin-bottom:5px;
}

#mainC div:nth-child(3n+0){
  border-right: 1px solid red;
}

https://jsfiddle.net/u8bpan3m/