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

コードは次のとおりです: 編集: 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 に答える