0

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

4

3 回答 3

0

检查这个：

<!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>

于 2013-10-02T09:06:40.957 回答
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 属性！

于 2013-10-02T09:07:13.880 回答
0

这是代码：编辑：仅使用 JavaScript 的更简单方法

<html>
<head>
	<style>
      .row {
          width: 50%;
          text-align: center;
          margin-top: 1px;
          color: #f0f0f0;
      }
      .abc0 {
          background: #303
      }
      .abc1 {
          background: #108
      }
      .abc2 {
          background: #801
      }
      .abc3 {
          background: #306
      }
      .abc4 {
          background: #702
      }
      .abc5 {
          background: #207
      }
      .abc6 {
          background: #603
      }
      .abc7 {
          background: #405
      }
      .abc8 {
          background: #504
      }
  </style>
</head>
  
<body>
    <div id="main"></div>
  
    <script type="text/javascript">
        window.onload = function() {
            var string = '';
            for (var j = 0; j < 9; j++)
                string += "<div class='row abc" + j + "'>" + j + "</div>";
            document.getElementById('main').innerHTML = string;
        };
    </script>
</body>
</html>

您只需要更改 div 中包含的背景颜色和数据。

于 2013-10-02T09:22:47.247 回答