이건 배열이 필요할 때에 사용하면 유용합니다. 약간씩 변형해서 고치면 된다는...

배열을 자주 쓰다 보니 고정형이 아닌 가변형으로 서버에 보내기 이전에 자바 스크립트만으로 배열을 완성해 놓는 소스가 필요해서 하나 만들어 놓고 예전부터 써 오고 있었는데 미관적으로 보기가 좀 그래서 팁으로 올리는 김에 테두리 처리를 좀 했습니다.

 

가장 첫 칸에 생성할 배열 총갯수를 적어주고 빨간색 CLICK 버튼을 누릅니다.

예를 들어서 7개라면 7개...

그럼 7개의 빈칸이 생겨납니다.

그 7개의 빈칸에 원하는 항목들을 적고 초록색 CLICK 을 누르면 그 항목들이 myarray 라는 배열로 자동 생성됩니다.

 

그 배열을 어찌 사용할지는 각자 본인의 몫이겠죠. 배열은 모든 프로그래밍의 기본이니까요.

 

<script>
function myclick(visible){
myarray=[]
for(i=1;i<=myn.value;i++){myarray.push('<DIV><SPAN class=myds style=width:40;border-right:0;text-align:center>'+i+'</SPAN><SPAN id=myurl'+i+' class=myds style=width:510 contentEditable=true></SPAN><SPAN class=myds style=width:50;border-left:0;text-align:center;cursor:pointer onclick=myurl'+i+'.innerHTML=\'\'>DEL</SPAN></DIV>')}
mypart.innerHTML=myarray.join('')
visibletr1.style.display=visibletr2.style.display=visible
}
function arrayclick(){
myarray=[]
for(j=1;j<=myn.value;j++){myarray.push(this['myurl'+j].innerText)}
mytext.innerText=myarray
}
</script>
<style>
.myinput{width:60;height:20;border:1 solid #cccccc;text-align:center;font-size:9pt;background:#ffffff}
.myds{color:#484848;font-size:8pt;font-family:verdana;background:#ffffff;height:22;border:1 solid #cccccc;border-top:0;padding:5 5 5 5}
</style>
<TABLE cellpadding=0 cellspacing=0>
<TR><TD height=1 bgcolor=#cccccc width=600></TD></TR>
<TR><TD class=myds>
<INPUT class=myinput name=myn onmouseout=if(value-parseInt(value)!='0'||value<0)value=''> ----------
<INPUT class=myinput style=color:#ff0000;cursor:pointer onclick=myclick('block') onfocus=blur() type=button value=CLICK> -
<INPUT class=myinput style=color:#ff0000;cursor:pointer onclick=myn.value='';mytext.innerText='';myclick('none') onfocus=blur() type=button value=RESET></TD></TR>
<TR><TD id=mypart></TD></TR>
<TR id=visibletr1 style=display:none><TD class=myds><BUTTON class=myinput style=color:green;cursor:pointer onfocus=blur() onclick=arrayclick()>CLICK</BUTTON> -  ARRAY NAME : myarray </TD></TR>
<TR id=visibletr2 style=display:none><TD><DIV id=mytext class=myds style=height:100;background></DIV></TD></TR></TABLE>