0

숫자 (0, 1, 2 - 9)를 기반으로 작은 위젯을 만들려고합니다. <td> (<tr>)으로 표에 사용됩니다.주어진 숫자에 대해 여러 개의 사각형을 그립니다.

JSFiddle : https://jsfiddle.net/jeffxiao/c0ojm3wr/

(may not work)

이 문제는 다음과 같습니다

내가 지금까지 가지고 해결책은 다음과 같이이다

  • 어떤 상자가 때 번호 표시 = 0
  • 상자 사이에 너무 많은 공간이 있습니다.

질문 : 위젯에 사용할 수있는 쉬운 방법/라이브러리가 있습니까?

또한 10 개의 이미지 (0 ~ 9까지)를 만들려고했지만이 방법을 사용하지 않을 것입니다.

+0

나는 링크를 클릭하여 스크립트를 찾고 아무 것도 찾을 수 없습니다. 여기에 코드를 입력 할 수 있습니까? –

+0

@ blaze_125 jsfiddle로 업데이트했습니다. 다시해볼 수 있니? –

+0

바이올린 : HTML 분할에 HTML 코드 (DIV 및 SPAN)가 포함되어 있지만 CSS 및 자바 스크립트 분할에는 내용이 표시되지 않습니다. 하단 오른쪽 분할 (결과)에는 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;'에 의해 관리됩니다. –

관련 문제