테스트 사이트 - 개발 중인 베타 버전입니다

js 테이블제작(궁금해서 도저히..) 채택완료

그렌트힐 3년 전 조회 2,323

 

112221211

이라는 값이 있을때...아래처럼 테이블을 어떻게 만들수가 있는거죠?

그냥 for 문도 아닌거 같고..js 로 해야 겠죠?

구글링 해봐도 방법을 알수가 없어서요..

 

1 2 1 2 1
1 2     1
  2    

 

 

조언이나 참고할 만한 자료 아시는분 혹시 계실까요? ^^

 

댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트
3년 전

</p>

<p>간단해 보이지만 복잡한 단계를 거쳐야 합니다</p>

<p>아래 코드를 실행해보세요(jquery이용)</p>

<p> </p>

<p><table width='500' border id="mytable"></table></p>

<p> <script>

ss = '112221211';

tmp =ss.split('');

j= -1; k =maxRow= 0;  prev = '0000';

list=[];</p>

<p>for(i=0; i< tmp.length; i++){

  if( tmp[i] !=prev){  j++; k=0; list[j] =new Array(); }

  list[j][k]  =tmp[i];

  if( k > maxRow) maxRow =k;

 document.write(j+'//'+k+'//' +'==>'+ list[j][k]+'///row cnt='+(maxRow+1)+'
');

 prev = tmp[i];    k++;  

}</p>

<p>maxCol = j+1; maxRow+=1;</p>

<p>for(k=0; k < maxRow; k++){

  tr="<tr>";    

  for(j=0; j< maxCol; j++){

    if(  !list[j][k]) list[j][k] ='';

       tr+="<td>"+list[j][k]+"</td>";

  }

   tr+="</tr>";

  $("#mytable").append(tr);

}</p>

<p>  </script></p>

<p>

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그렌트힐
3년 전
와우...역시 복잡한 거였군요..ㅠ
대단하십니다.

댓글을 작성하려면 로그인이 필요합니다.

좀 더 앞뒤 내용이 있으면 좋겠네요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

이거 은근히 복잡하네요.

 

</p>

<p><style>

#myTable { width:100%; table-layout:fixed; border-spacing:1px; background-color:#cccccc; }

#myTable td { background-color:#ffffff; text-align:center; padding:10px; }

</style>

<script>

tableString = "112221211";

changeString = "";

for (i = 0; i < tableString.length; i++) changeString += tableString[i] + (tableString[i] != tableString[i + 1] ? "|" : "");

tableString = changeString.slice(0, -1).split("|");  

trTotal = 0;

for (i in tableString) trTotal = tableString[i].length >= trTotal ? tableString[i].length : trTotal;

tableTotal = "";

for (i = 0; i < trTotal; i++) for (j in tableString) tableTotal += tableString[j][i];

tableTotal = tableTotal.replaceAll("undefined", " ");

document.write("<table id='myTable'><tr>");

for (i = 0; i < tableTotal.length; i++) {

    addTr = (i != 0 && i % tableString.length == 0) ? "</tr><tr>" : ""; 

    document.write(addTr + "<td>" + tableTotal[i] + "</td>"); 

}

document.write("</tr></table>");

</script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그렌트힐
3년 전
와우..정말 고수분들이 많으시네요..
그저 감동입니다. 균이님, 비타주리님 모두 정확하게 테이블이 만들어지네요..
그저 대단하십니다...
채택을 두분을 할수가 없어서...ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

꼭 js가 아니더라도 칼럼중에 count가 제일 많은 값을 구해서

그만큼 반복을 돌리면 되는거 아닌가요??

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그렌트힐
3년 전
아..왠지 힌트가 될듯 합니다. 머리가 안좋아서 머리에서 돌아가지는 않지만요..^^;

댓글을 작성하려면 로그인이 필요합니다.

3년 전

각 컬럼의 구분이 연속된 같은문자에서 변경될 경우 발생하는 조건이네요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그렌트힐
3년 전
답변 감사합니다.
첫번째 열에서 11 나온뒤에..3번째 값이 2 여서 열을 바꾼뒤에...2가 3개 나왔을때...첫번째열 3번째칸 공란처리를 해줘야 해서요..

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인