주변코드 좀 지우고 동적테이블 부분만 넣어서 만들었습니다.

 

addItem() 부분 보시면 td생성부분이 8개 있구요.. 일단 올려주신 소스대로 텍스트만 넣었습니다.

각 TD에 아래에서 입력받은 값을 읽어다가 innerHTML에 넣어주심되요.

 

이미 디비에 저장된걸 불러온 경우는 먼저 올려주셨던 소스처럼 삭제/수정버튼이 필요하지만..

아직 디비에 저장되기 전인.. 동적으로 생성된 tr엔 수정은 필요없겠죠. (필요할려나?)

 

그리고 삭제 버튼도 동적tr은 tr만 사라지면 되는 것이라 delItem()을 호출하구요.

이미 디비에 저장된걸 불러온 경우는 delData()를 호출합니다.

그게 호출되면 실제 디비 삭제 처리되도록 연동은 하셔야겠죠..

삭제도 TR만 일단 없앴다가 한번에 저장할때 저장과 삭제 처리를 함께 하실려면 delItem() 호출하게 바꾸심되요.

 

그리고 전혀 디비에 저장된게 없는 상태일때 표시되는 문구가 하나의 TR을 차지하고 있기때문에

12라인을 보시면 (row_index-1) 이렇게 해서 그 라인 바로 앞에 새 TR을 생성하게 했어요.

만약에 디비에서 불러온게 1개 이상 있을때 이 문구 TR을 보여주지 않을거라면 12라인이 때에 따라 달라져야겠죠..

그거 좀 구찮으니 그냥 항상 표시해주시는게 어떨런지요..

그래서 등록된 가족사항이 없다는 문구 부분만 eof 체크해서 뿌려주게 했습니다.

 

상황에 맞게 좀 편집은 하셔야해요.

저장할때 추가/삭제를 한번에 처리하실려면 삭제되는 tr이 어떤건지도 값을 넘길 방안을 찾으셔야하구요..

일단 아래소스 그대로 실행시켜서 결과가 어떤지 먼저 보신 후 작업하시는 소스에 적용해보시길 권합니다.~

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<style>
body,td{font-size:9pt}
</style>
 
<script language="javascript">
function addItem() {
      var lo_table = document.getElementById("AppliForm_Tb");
      var row_index = lo_table.rows.length;      // 테이블(TR) row 개수
      newTr = lo_table.insertRow(row_index-1);
      newTr.idName = "newTr" + row_index;
      newTr.className = "conTR";
      newTr.height = "40";
 
      newTd=newTr.insertCell(0);
      newTd.innerHTML = '<input type="text" name="inRelation" style="width:50px" value="">';
 
      newTd=newTr.insertCell(1);
      newTd.innerHTML = "";
 
      newTd=newTr.insertCell(2);
      newTd.innerHTML = "50";
 
      newTd=newTr.insertCell(3);
      newTd.innerHTML = "대학원";
 
      newTd=newTr.insertCell(4);
      newTd.innerHTML = "삼성전자";
 
      newTd=newTr.insertCell(5);
      newTd.innerHTML = "팀장";
 
      newTd=newTr.insertCell(6);
      newTd.innerHTML= "비동거";
 
      newTd=newTr.insertCell(7);
      newTd.innerHTML     = '<img src="/images/btn/x.gif" align=absmiddle alt="삭제" onClick="delItem('+ row_index +')" onMouseOver="this.style.cursor=\'pointer\'">';
}
// 동적으로 추가한 행 삭제
function delItem(row_index){
      var lo_table = document.getElementById("AppliForm_Tb");
      lo_table.deleteRow(row_index);    
}
// 디비에 등록된 행 삭제
function delData(row_index){
 
}
function editData(row_index){
// 디비에 등록된 행 수정
}
</script>
</head>
<body>
<!-- 가족사항 -->
<table cellpadding=0 cellspacing=0 id="BoxGray">
<tr><td><img src="/images/common/outline_gray_top.gif"></td></tr>
<tr><td class="contents">
     <div class="subj"><img src="/images/recruit/apply_subject_01_03.gif"></div>
 
     <table cellpadding=5 cellspacing=0 width=620 id="AppliForm_Tb" border="1" bordercolor="#dadada" style="margin-bottom:10px">
     <colgroup>
          <col width=90 />
          <col width=70 />
          <col width=50 />
          <col width=70 />
          <col  />
          <col width=60 />
          <col width=50 />
          <col width=30 />
     </colgroup>
     <tr class="subjecTR">
          <td>관계</td>
          <td>성명</td>
          <td>연령</td>
          <td>최종학력</td>
          <td>직장명</td>
          <td>직위</td>
          <td>동거여부</td>
          <td></td>
     </tr>
<%
     If Not rs_family.EOF Then
          cnt = 1
          Do Until rs_family.EOF
               vRelation = rs_family("FAMILY010_Relation")
               vName  = rs_family("FAMILY010_Name")
%>
               <tr id="newTr<%=cnt%>" class="conTR" height=40>
               <td><input type="text" name="inRelation" value="<%=vRelation%>"></td>
               <td><%=vName%></td>
               <td>50</td>
               <td>대학원</td>
               <td>삼성전자</td>
               <td>팀장</td>
               <td>비동거</td>
               <td>
                    <img src="/images/btn/x.gif" align=absmiddle alt="삭제" onClick="delData(<%=rs_family("키값")%>)" style="cursor:pointer">
                    <img src="/images/btn/+.gif" align=absmiddle alt="수정" onClick="editData(<%=rs_family("키값")%>)" style="cursor:pointer">
               </td>
               </tr>
<%
          rs_family.MoveNext
          cnt = cnt + 1
     Loop
End If
%>
     <tr height=80 bgcolor=#FFFFFF><td colspan=8 align=center>
     <%If rs_family.EOF Then%>
          아직 등록된 가족 사항이 없습니다.<br>
     <%End IF%>
          아래 [<font class="green"><strong>가족추가</strong></font>] 버튼을 눌러 가족사항을 입력하세요.
     </td></tr>
     </table>
 
     <!-- 등록 -->
     <span style="width:550px; vertical-align:top; padding-top:4px;">* 가족 사항 입력을 완료하셨다면 하단의 [<font class="green"><strong>저장하기</strong></font>] 버튼을 눌러 저장하는 것이 좋습니다.</span>
     <span><a href="javascript:addItem();"><img src="/images/btn/add_family.gif"></a></span>
</td></tr>
<tr><td><img src="/images/common/outline_gray_bottom.gif" class="mt_05"></td></tr>
</table>
</body>
</html>

 

이 게시물을..