Question

我想使用Jquery在我的html页面中创建 9 * 9 divs，我也想问一下是否可以使用特定高度（100px）创建它们背景颜色取决于列，（例如第1列黄色，第2列红色等），div的ID是否唯一？

Answer 1

检查一下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
    $(function(){
        for(i=1; i<10; i++){
                for(j=1; j<10; j++){
                    $(".wrapper").append("<div id="+i+""+j+" class='box col"+j+"'>")    
                }   
            }
        });
</script>
<style>
.wrapper { width:920px; margin:0 auto; }
.box { width:100px; height:100px; float:left; margin:1px; }
.col1 { background:yellow; }
.col2 { background:red; }
</style>
</head>

<body>
<div class="wrapper"> </div>
</body>
</html>

Answer 2

你可以像这样创建它们：

for(var cntx = 0;cntx < 9;cntx ++){
   $("#containerDiv").append("<div class='divRow'>");
   for(var cnty = 0;cnty < 9;cnty ++){
       var mydiv = "<div class='mydiv' style='height: 100px; background: red; display: inline-block;' id='"; 
       mydiv += #divID
       mydiv += "'>";
       mydiv += #contetn for div contx * 9 + conty
       mydiv += "</div>;
       $("#containerDiv").append(mydiv);
   }
   $("#containerDiv").append("</div>");

}

在样式参数中，您可以为所需的每个元素设置任何css属性！

Answer 3

这是代码愿这可以帮到你

<html>
<head>
    <style>
        .main-div{height:auto; width:auto; background: #f2f2f2;}
        .row{height:20px; width:100%; background: #f0f0f0; margin-top:10px;}
        .blank(height:10px; background:#fff;}
        .wideWidth{width:100px;}
        .0abc{background:#000}
        .1abc{background:#001}
        .2abc{background:#002}
        .3abc{background:#003}
        .4abc{background:#004}
        .5abc{background:#005}
        .6abc{background:#006}
        .7abc{background:#007}
        .8abc{background:#008}

    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            var string ='';
            for(var i=0; i<9; i++)
            {
                string+="<div class='blank'></div>";
                string+="<div class='row'>";
                for (var j=0; j<9 ; j++ )
                {
                    string+="<sapn class='"+j+"abc wideWidth'>"+j+"</span>";
                }
                string+="</div>";
            }
            $("#main").html(string);
        });
    </script>

<head>
<body>
    <div class="main-div" id="main"></div>
</body>

您只需更改div中包含的背景颜色和数据即可。一切都完成了。

Jquery创建具有特定高度和颜色的多个div

3 个答案: