1

次のような 4x3 div グリッド ボックスがあります。

        <div id="MainDiv" style="border:1px solid black; width:122px; height:160px;">
        <div id="Column1" style="float:left">
            <div id="sq1" style="width:40px; height:40px;">
            </div>
            <div id="sq2" style="width:40px; height:40px;">
            </div>
            <div id="sq3" style="width:40px; height:40px;">
            </div>
            <div id="sq4" style="width:40px; height:40px;">
            </div>
        </div>
        <div id="Column2" style="float:left">
            <div id="sq5" style="width:40px; height:40px;">
            </div>
            <div id="sq6" style="width:40px; height:40px;">
            </div>
            <div id="sq7" style="width:40px; height:40px;">
            </div>
            <div id="sq8" style="width:40px; height:40px;">
            </div>
        </div>
        <div id="Column3" style="float:left">
            <div id="sq9" style="width:40px; height:40px;">
            </div>
            <div id="sq10" style="width:40px; height:40px;">
            </div>
            <div id="sq11" style="width:40px; height:40px;">
            </div>
            <div id="sq12" style="width:40px; height:40px;">
            </div>
        </div>

数行のコードを記述してプロセス全体を自動化するにはどうすればよいですか?

4

2 に答える 2

0

ここでjsfiddle：

http://jsfiddle.net/UnMJq/1/

それはあなたが望むものですか？

于 2012-09-21T04:03:17.623 に答える
0

Java スクリプトを使用して、要素を反復および動的に作成できます。

このコードは機能します。||要素の操作|| 

<script type="text/javascript">
var my_div = null;
var mainDiv = null;
var column = null;
var sq = null;
function addElement()
{
  // create a new div element
  // and give it some content
  mainDiv = document.createElement("div");
  mainDiv.setAttribute('id', 'MainDiv');  
  mainDiv.setAttribute('style', 'border:1px solid black; width:122px; height:160px;');

  var i=0,id;
  var k= 1;
  for(j=0;j<3;j++) {
      column = document.createElement("div");
      column.setAttribute('id', 'Column' + (j+1));  
      column.setAttribute('style', 'float:left');

      for(i=0; i<4; i++) {
          sq = document.createElement("div");
          sq.setAttribute('id', "sq" + k);  
          sq.setAttribute('style', 'width:40px; height:40px;');
          k++;

          column.appendChild(sq);
      }

      mainDiv.appendChild(column);
  }
  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(mainDiv, my_div);
}

</script>

<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
于 2012-09-21T04:04:08.023 に答える