Jquery создает несколько div с определенной высоты и цвета

0

Я хочу создать 9 * 9 divs на моей странице html с помощью JQuery, также я хотел бы спросить, можно ли создать их с определенной высотой (100 пикселей) и цветом фона в зависимости от столбца (например, желтый стол 1, столбец 2 красный и т.д.), будут ли идентификаторы divs уникальными?

  • 1
    Да, идентификаторы должны быть уникальными
  • 0
    что бы ты ни захотел
Показать ещё 1 комментарий
Теги:

3 ответа

0

проверьте это

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/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>
Поделиться
  • 0
    Хотя это очевидно для более опытных программистов, некоторым людям будет трудно понять некоторые части этого. На самом деле объясните свой ответ, а не просто отправив код
0

Вот код. Это поможет вам

<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.. и все сделано.

Поделиться
0

вы можете создать их так:

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 для каждого элемента, который вы хотите!

Поделиться
  • 1
    Вы должны сгенерировать каждый div с помощью $(document.createElement('div')).addClass('mydiv').css(...).prop('id', ...) вместо конкатенации строк, что просто ужасно
  • 0
    Единственная проблема в том, что Дэнни - новичок, так что ему легче с ним справиться !;)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню