js 테이블제작(궁금해서 도저히..)
본문
112221211
이라는 값이 있을때...아래처럼 테이블을 어떻게 만들수가 있는거죠?
그냥 for 문도 아닌거 같고..js 로 해야 겠죠?
구글링 해봐도 방법을 알수가 없어서요..
| 1 | 2 | 1 | 2 | 1 |
| 1 | 2 | 1 | ||
| 2 |
|
조언이나 참고할 만한 자료 아시는분 혹시 계실까요? ^^
답변 5
간단해 보이지만 복잡한 단계를 거쳐야 합니다
아래 코드를 실행해보세요(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>
와우...역시 복잡한 거였군요..ㅠ
대단하십니다.
꼭 js가 아니더라도 칼럼중에 count가 제일 많은 값을 구해서
그만큼 반복을 돌리면 되는거 아닌가요??
아..왠지 힌트가 될듯 합니다. 머리가 안좋아서 머리에서 돌아가지는 않지만요..^^;
이거 은근히 복잡하네요.
<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>
와우..정말 고수분들이 많으시네요..
그저 감동입니다. 균이님, 비타주리님 모두 정확하게 테이블이 만들어지네요..
그저 대단하십니다...
채택을 두분을 할수가 없어서...ㅠㅠ
각 컬럼의 구분이 연속된 같은문자에서 변경될 경우 발생하는 조건이네요
답변 감사합니다.
첫번째 열에서 11 나온뒤에..3번째 값이 2 여서 열을 바꾼뒤에...2가 3개 나왔을때...첫번째열 3번째칸 공란처리를 해줘야 해서요..
좀 더 앞뒤 내용이 있으면 좋겠네요
답변을 작성하시기 전에 로그인 해주세요.
