0

私は数字(0,1,2-9)に基づいて小さなウィジェットを作ろうとしています。 <td><tr>の表に使用されます。問題はない https://jsfiddle.net/jeffxiao/c0ojm3wr/与えられた数の正方形の数を描く

may not work

  • 数示さ一切ボックス

    JSFiddle:私は今のところ得

    ソリューションは、このようなものです= 0

  • ボックス間に余りにもスペースがあります。

質問:このようなウィジェットに使用できる簡単な方法やライブラリはありますか?

私は10枚の画像(0〜9まで)を作成することも考えましたが、このアプローチを使用しないでください。

+0

私はリンクをクリックし、スクリプトを探して何も見つかりませんでした。ここにコードを入力できますか? –

+0

@ blaze_125私はjsfiddleで更新しました。もう一度やり直せますか? –

+0

フィドルに行きました:HTMLスプリットにはHTMLコード(DIVとSPAN)が含まれていますが、CSSとJavascriptのスプリットには内容が表示されません。下の右の分割(結果)は、8つの黒い四角を示しています。 –

答えて

0

ボックスの内容はわかりません。まあ、私たちは...しかし...あなたの状況ではありません。あなたが実際にやろうとしていることに関する詳細な情報が不足しています(最小限のコードサンプルはに役立ちます)。

編集: あなたの文脈にどのようなボックスがあるかについての情報を得ましたので、ここに更新コードがあります。

var aSpan = "<span style='background: black; margin: 2px;'>&nbsp;&nbsp;&nbsp;</span>" 

makeBoxes(5); 
function makeBoxes(Howmany) 
{ 
    for(var i = 0; i < Howmany; i++) 
    { 
     document.getElementById("TheTD").innerHTML += aSpan; 
    } 
} 

示していないボックスをするとき数= 0

あなたはボックスの要求数が0であるときに、画面上で印刷するように期待していますか?私には0音のためのボックスは表示されません。 0の1ボックスを印刷すると予想される場合は、1の2ボックス、2の3ボックスなどを印刷することを意味しますか?

+0

'私たちはボックスが何であるか分かりません。 '...私は、最も基本的な意味で、正方形(多分色で塗りつぶしている)を意味します。タイトルが正方形に更新されました –

+0

上記の更新されたコードは、あなたが望むことをすると思います。 'n'個のボックスを並べて表示します。私のテストHTMLページでは、 'document.getElementById(" TheTD ")'はテーブルの列セルです。このスニペットのボックス自体のサイズは、「 」の数だけ表示されます。ボックス間の距離は、スパンスタイル定義で 'margin:2px;'によって管理されます。 –

関連する問題