DEVHolic

BOARD

글수 11

자바스크립트 동적테이블생성 추가 삭제까지는 완성하였는데 이제 위로 이동 아래로 이동이 문제네요;;

bell

http://www.devholic.net/1000753

2009-12-04 11:02:01 (**.111.47.67)

8067

Javascript

안녕하세요. 또 이렇게 도움을;;

추가 삭제는 저번에 알려주셔서 또 다른 테이블에 응용하여 이렇게 만들었는데, 위로이동 아래로 이동..

이것도 자바스크립틑로 따로 제작이 되는지요. 된다면 소스좀 부탁드립니다 ㅠ 정말 죄송해용~

js부분

var lo_table = document.getElementById("TblAttach"); //TblAttach은 추가될 tr이 들어갈 테이블 lo_table로 명명.
var row_index = lo_table.rows.length;     //테이블(TR) row 행 개수는 row_index 명명.
var newTr = lo_table.insertRow(row_index);    //insertRow(); 이미 존재하는 테이블에 row(tr)추가.
newTr.idName = "newTr" + row_index;
newTr.className = "conTR";
newTr.height = "40";

    newTd=newTr.insertCell(0);
    newTd.align = "center";
    newTd.innerHTML= "<input readonly name='cName' type='text' class='formbox2' style='width:120px;' value='"+ document.getElementById("selName").value +"'>";   //회사명

newTd=newTr.insertCell(1);
newTd.align = "center";
newTd.innerHTML= "<input readonly name='cInDate' type='text' class='formbox2' style='width:55px;' maxlength='6' value='"+ document.getElementById("selInDate").value +"'>"; //입사년월

newTd=newTr.insertCell(2);
newTd.align = "center";
newTd.innerHTML= "<input readonly name='cOutDate' type='text' class='formbox2' style='width:55px;' maxlength='6' value='"+ document.getElementById("selInDate").value +"'>"; //퇴사년월

newTd=newTr.insertCell(3);
newTd.align = "center";
newTd.innerHTML= "<input readonly name='cPosition' type='text' class='formbox2' style='width:45px;' value='"+ document.getElementById("selPosition").value +"'>"; //직위

newTd=newTr.insertCell(4);
newTd.align = "center";
newTd.innerHTML= "<input readonly name='cDuty' type='text' class='formbox2' style='width:70px;' value='"+ document.getElementById("selDuty").value +"'>"; //담당업무

newTd=newTr.insertCell(5);
newTd.align = "center";
newTd.innerHTML= "<input readonly name='cAmount' type='text' class='formbox2' style='width:55px;' value='"+ document.getElementById("selAmount").value +"'>"; //연봉

newTd=newTr.insertCell(6);
newTd.align = "center";
newTd.innerHTML= "<input readonly name='cReason' type='text' class='formbox2' style='width:50px;' value='"+ document.getElementById("selReason").value +"'>"; //퇴직사유

newTd=newTr.insertCell(7);
newTd.align = "center"; //★★★★위로이동, 아래로이동 버튼이 매 tr마다 있습니다.★★★★
newTd.innerHTML= '<img src="/images/btn/up.gif" alt="위로 이동"><img src="/images/btn/down.gif" alt="아래로 이동"><img src="/images/btn/x.gif" alt="삭제" style="margin-left:3px;" onClick="delItem(\'newTr'+ row_index +'\')" onMouseOver="this.style.cursor=\'pointer\'" >';//퇴직사유

}

// ★★★동적으로 추가한 행 삭제 ★★★
function delItem(row_index)
{
var lo_table = document.getElementById("TblAttach");
for (i = 0; i < lo_table.rows.length; i++)
  {
   if (row_index == lo_table.rows[i].idName)
   lo_table.deleteRow(i);
  }
   alert(row_index);
     //lo_table.deleteRow(document.getElementById(row_index));
}

</script>

html+asp 부분

<span style="width:550px; vertical-align:top; padding-top:0px;">
      <table cellpadding=5 cellspacing=0 width=620 id="TrAdd" class="AppliForm_Tb" border="1" bordercolor="#dadada" style="margin-bottom:10px;">
       <colgroup>
        <col width=130 />
        <col width=60 />
        <col width=60 />
        <col width=50 />
        <col width=70 />
        <col width=60 />
        <col width=50 />
        <col />
       </colgroup>
       
       <tr class="conTR" height=40>
         <td class="con1"><input id="selName" name="cName" type="text" class="formbox" style="width:120px;"></td>//회사명
         <td><input id="selInDate" name="cInDate" type="text" class="formbox" style="width:55px;" maxlength=6></td>//입사년월
         <td><input id="selOutDate" name="cOutDate" type="text" class="formbox" style="width:55px;" maxlength=6></td>//퇴사년월
         <td><input id="selPosition" name="cPosition" type="text" class="formbox" style="width:45px;"></td>//직위
         <td><input id="selDuty" name="cDuty" type="text" class="formbox" style="width:70px;"></td>//담당업무
         <td><input id="selAmount" name="cAmount" type="text" class="formbox" style="width:55px;"></td>//연봉
         <td><input id="selReason" name="cReason" type="text" class="formbox" style="width:50px;"></td>//퇴직사유         <td></td>
       </tr>
       
      </table>
      </span>

이 게시물을..

댓글보기(6)

댓글쓰기

2009-12-04 13:39:58 (**.243.254.142)

DEVHolic

이건 돌려보지 않고 대충 만들어드리는거라 어딘가서 오류가 날런지는 모르지만요..

일단 맥락은...

moveItem이란 버튼에 이동하려는 TR의 index 번호와 위(up) 또는 아래(down)의 값을 넘기면..

해당 TR의 위 또는 아래에 새 TR을 추가해서 카피본을 만들고 기존 TR을 삭제하는 구조예요..

넣어보시고 오류가 있으면 잡아주시고 코멘트 달아주세요 ㅎㅎ

moveItem은 각 tr마다 라디오버튼를 둬서 위/아래 버튼 클릭될때 체크된 놈의 index값을 넘기시면 될듯해요

-----------------------------------

function moveItem(nIdx,move)
{
var lo_table = document.getElementById("TblAttach");
var oRow = lo_table.rows[nIdx];

if (move == "up"){ // 옮기려는 row 윗줄에 새row 생성
  var nIndex = oRow.rowIndex - 1;
  if (nIndex<0) return;
  var newTr = lo_table.insertRow(nIndex);
}else{ // 옮기려는 row 밑줄에 새row 생성
  var nIndex = oRow.rowIndex + 2;
  if(nIndex > lo_table.rows.length) return;
  var newTr = oTbl.insertRow(nIndex);
}

// 옮기려는 row의 td를 새로 생성한 row에 복사
for (i=0; i<oRow.childNodes.length; i++){
  if (oRow.childNodes[i].tagName=="TD")
  {
   var oCell = document.createElement("TD");
   oNewRow.appendChild(oCell);
   oCell.innerHTML = oRow.childNodes[i].innerHTML;
  }
}

// 기존 row 삭제 (up일때는 새row가 추가됐으니 인덱스 번호가 달라진 상태)
var n = (move=="up")?parseInt(nIdx)+1:parseInt(nIdx);
oTbl.deleteRow(n);
}

이 댓글을..

2009-12-04 15:03:56 (**.111.47.67)

bell

위로 이동 단추에는 onClick="moveItemUp(nIdx,move)이렇게 onclick을 주면 되나요? 그리고 tr마다 라디오버튼을 줘서 체크된 놈의 index값을 넘긴다는 말이 이해가 안되네요; 그 값이 moveItem함수의 nIdx값이 되는 건가요?;

이 댓글을..

2009-12-04 16:01:55 (**.243.254.142)

DEVHolic

이를테면..

버튼은 이케 있구요

목록마다 앞엔 라디오버튼이 있어요. 이름을 가령 rdoRow 라고 칩시다

function move(mtype){

var rdo_idx = -1;

// 라디오버튼이 체크된 것이 있는지 부터 체크..

for(var idx = 0; idx<frm.rdoRow.length; idx++){

if(frm.rdoRow[idx].checked){

rdo_idx = idx;

break;

}

if(rdo_idx == -1){

alert("이동시킬 항목을 선택하세요.");

return;

}else{

moveItem(rdo_idx, mtype);

}

이런식으로 하는거죠...

무작정 버튼 눌렀다고 이동시키는게 아니라 어떤걸 이동시킬지 선택은 했는지부터 확인!!

만약에 이동 버튼이 하나가 아니라 각각 row마다 ▲▼ 이런식으로 있다면..

바로 moveItem을 호출해도 되긴 하죠.. 다만 현재 idx값을 넘기긴 해야하니 addRow할 당시 row가 삽입되는 index는 알고 있을거고 그 값을 .. moveItem("+ index +") .. 이케 넣어줌 되요.

이 댓글을..

2009-12-04 19:45:06 (**.208.231.136)

DEVHolic

지금에서야 소스를 찬찬히 보니 tr마다 이동버튼이 있는거였군요;;

업무시간에 잠깐 짬내서 봤던거라 소스를 끝까지 다 안봤었네요 제가..

tr마다 버튼이 있는거라면 오히려 더 쉽네요. 삭제 버튼에 row_index 값 넘기는 것처럼

위로 버튼엔 row_index값과 'up'이라는 파라미터를, 아래로 버튼엔 row_index값과 'down'이라는 파라미터를 moveItem에 넘겨주심 끝!!

이 댓글을..

2009-12-07 12:03:47 (**.111.47.67)

bell

ㅎㅎ 감사합니다. 제가 또 수고스럽게 해드렸네요.

이 댓글을..

2009-12-07 12:36:50 (**.243.254.142)

DEVHolic

별말씀을^^

이 댓글을..

번호	제목	작성자	날짜	조회수
알림	기타 Q&A 이용안내	DEVHolic	2009-09-08	93
11	Javascript 문자열값의 차이가 왜 나는지 모르겠습니다. ㅠ.ㅜ 1	유상윤	2012-07-17	3869
10	HTML/CSS [xml] XML 문서를 html로 2	길손	2010-09-30	4819
9	Javascript 혹시 이싸이트에서 사용하고있는 위지윅에디터를 공유해주실수 있나요? 2	클리티에	2010-05-12	4396
8	Javascript JSONP 사용하는방법좀요~~~ 2	클리티에	2010-01-29	4367
7	Javascript ☞ 자바스크립트 동적테이블생성 추가 삭제까지는 완성하였는데 이제 위로 이동 아래로 이동이 문제네요;; 6	bell	2009-12-04	8066
6	Javascript 먹었던 자바스크립트가 갑자기 안되네요 ㅠㅠ 급합니다;; 5	bell	2009-11-24	4761
5	Javascript 염치불구하고 자바스크립트 질문 하나 더요~ 1	bell	2009-11-23	3967
4	ASP bell님 아랫글 답변입니다. 1	DEVHolic	2009-11-23	4340
3	ASP 입사지원을 만드는 중인데오 가족사항 추가 부분이 참 고민입니다. 9	bell	2009-11-22	2413
2	ASP 감사합니다.^^한가지더 여쭤봐도 괜찮을런지요. 2	클리티에	2009-11-19	2273
1	ASP 게시글 주소 질문드려보아요^^ 1	클리티에	2009-11-19	1213

첫페이지 1 끝페이지

BOARD

자바스크립트 동적테이블생성 추가 삭제까지는 완성하였는데 이제 위로 이동 아래로 이동이 문제네요;;

로그인