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

그렌트힐

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2022-09-26 (월) 15:43:32 2,696

112221211

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

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

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

1	2	1	2	1
1	2			1
	2

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

그누보드5 javascript table

답변 5개 / 댓글 4개

채택된 답변

+20 포인트

균이

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2022-09-26 (월) 21:48:50

Copy

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

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

 

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

 <script>
ss = '112221211';
tmp =ss.split('');
j= -1; k =maxRow= 0;  prev = '0000';
list=[];

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)+'<br>');
 prev = tmp[i];    k++;  
}

maxCol = j+1; maxRow+=1;

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);
}

  </script>

답변에 대한 댓글 1개

그렌트힐

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2022-09-26 (월) 22:46:08

와우...역시 복잡한 거였군요..ㅠ
대단하십니다.

엑스엠엘

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2022-09-27 (화) 05:55:44

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

비타주리

프로필 보기 작성한 질문 작성한 답변 전체 작성글 보기 전체 댓글 보기

2022-09-26 (월) 22:12:25

이거 은근히 복잡하네요.

Copy

<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>