javascriptを使用してテーブルにdivを生成する6 x 6

私は小さなコードに執着しています。だからjavascriptを使用して、divを作成して、実際にはtableタグを使用しない場合を除いて、6x6テーブルに表示しようとしています。（この理由は、テーブルが妨害されてしまった後に何かをしなければならないからです）。とにかく、主な目標は、JavaScriptを使用して赤色の100ピクセルの正方形の6x6テーブルを生成することです。それぞれのdivは後で目的のために独自のidを持っていますが、私はこのテーブルを正しく表示することが必要です。javascriptを使用してテーブルにdivを生成する6 x 6

<!doctype html> 
    <html>  

    <title></title> 
    <head> 

    <script type="text/javascript"> 

    function generateGrid(){ 
    var div = document.createElement("Div"); 
    div.style.width = "100px"; 
    div.style.height="100px"; 
    div.style.background = "red"; 
    linebreak = document.createElement("br"); 

    for(i=0;i<6;i++){ 

     for(b=0;b<6;b++){ 
      document.body.appendChild(div); 
     } 
      document.body.appendChild(linebreak); 
    } 
    } 
    </script> 
    </head>  

    <body> 
    <script>generateGrid();</script> 

    </body>  

    </html>

何らかの理由で、1つの赤いボックスしか表示されません。私は非常にシンプルなエラーだと確信していますが、私は修正を見つけることができませんでした、これは、インターネットプログラミングクラスのためのjavascript（javaプログラマー）にネイティブではありません。誰

出典

2016-10-04 lionetti12345

あなたは正確に二つの要素、1つのdivと1つのBRを作成し、表示したコードに

感謝。 .appendChild() methodは、divの追加コピーを作成せず、最初のものを挿入または移動するだけです。（この場合を除き、あなたは何の効果もありません、それはすでに存在している場所、それを追加すると言っている。）

とにかく、必要な簡単な修正は、ループ内に新しいdiv要素を作成するだけです：

を

function generateGrid() { 
 
    var div; 
 
    for (i = 0; i < 6; i++) { 
 
    for (b = 0; b < 6; b++) { 
 
     div = document.createElement("div"); 
 
     div.style.width = "10px"; 
 
     div.style.height = "10px"; 
 
     div.style.background = "red"; 
 
     div.style.display = "inline-block"; 
 
     div.style.margin = "1px"; 
 
     document.body.appendChild(div); 
 
    } 
 
    document.body.appendChild(document.createElement("br")); 
 
    } 
 
} 
 

 
generateGrid();

注しかしあなたがdisplay: inlineまたはdisplay: inline-blockにそれらを設定しない限り、あなたは各ライン上に並んで6つの側を取得することはできませんので、div要素は、ブロック要素であり、デフォルトでいます。どこかになってきた

function generateGrid() { 
 
    var div; 
 
    for (i = 0; i < 6; i++) { 
 
    for (b = 0; b < 6; b++) { 
 
     div = document.createElement("div"); 
 
     div.className = "cell"; 
 
     document.body.appendChild(div); 
 
    } 
 
    document.body.appendChild(document.createElement("br")); 
 
    } 
 
} 
 

 
generateGrid();

.cell { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: red; 
 
    display: inline-block; 
 
    margin: 1px; 
 
}

出典

2016-10-04 01:33:32 nnnnnn

：

むしろ直接これらのスタイルのすべてを設定するよりも、CSSでそれらを設定し、ちょうどクラスを割り当てることがよりよいだろう。それが正しく表示されないことを除いて。 6の最初の列を表示しますが、図形は歪んでおり、その1つの列のみです。私はここからそれを改ざんすることができますか？どうもありがとうございます。 – lionetti12345

私はそれを説明する更新を入れました。 – nnnnnn

さて、私はばかだ、私はインラインブロックで何かをしなければならないことを知っていた...ありがとうございました – lionetti12345

javascriptを使用してテーブルにdivを生成する6 x 6

答えて

関連する問題