배열 테이블 생성 소스 정보
배열 테이블 생성 소스
본문
이건 배열이 필요할 때에 사용하면 유용합니다. 약간씩 변형해서 고치면 된다는...
배열을 자주 쓰다 보니 고정형이 아닌 가변형으로 서버에 보내기 이전에 자바 스크립트만으로 배열을 완성해 놓는 소스가 필요해서 하나 만들어 놓고 예전부터 써 오고 있었는데 미관적으로 보기가 좀 그래서 팁으로 올리는 김에 테두리 처리를 좀 했습니다.
가장 첫 칸에 생성할 배열 총갯수를 적어주고 빨간색 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>
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>
추천
2
2
댓글 2개
좋은 팁 감사해요
감사합니다
