초짜 개발자의 작업일기

 신입이라 위안삼아 보지만 부끄럽게도 부족한 것도 많고 , 모르는 것도 많고 실수도 많다. 지금까지 코딩을 하면서 자잘한 실수와 알게 된 것이 많지만 현재 테이블 관련하여 작업중인 것으로 첫 글을 남기려 한다.

 한 테이블에 ajax를 통해 불러온 데이터를 각 행을 클릭하면 그 행의 필요 데이터가 옆에 디자인한 다른 테이블로 옮겨진다. 그리고 이 옮겨진 데이터를 버튼을 통해 값을 늘리거나 줄이고, 삭제하려고 하는 아주 간단한 작업이다.

 나는 이 간단한 작업을 날짜로는 일주일을 경과하여 완료하였다.

1.첫 고비

클릭하여 옆 테이블로 옮기는 것은 아주 간단하다. 그래서 기본적으로 쓰였던

테이블 값을 넣고

                          tbody += '<tr>';

                          tbody += '<td cname="rownum" onclick="menuInfoModal" data-toggle="modal" data-target="#menuInfoModal" class="menuinfo">'+rdata.menu[a].rownum+'</td>';

                          tbody += '<input type="hidden" cname="seq" value='+rdata.menu[a].seq+'>';

                          tbody += '<td cname="menu_type" onclick="menuInfoModal" data-toggle="modal" data-target="#menuInfoModal" class="menuinfo">'+rdata.menu[a].code_nm+'</td>';

                          tbody += '<td cname="menu_name" onclick="menuInfoModal" data-toggle="modal" data-target="#menuInfoModal" class="menuinfo">'+rdata.menu[a].menu_name+'</td>';

                          tbody += '<td cname="menu_price" onclick="menuInfoModal" data-toggle="modal" data-target="#menuInfoModal" class="menuinfo">'+rdata.menu[a].menu_price+'</td>';

                          tbody += '<td cname="utm" onclick="menuInfoModal" data-toggle="modal" data-target="#menuInfoModal" class="menuinfo">'+rdata.menu[a].utm+'</td>';

                          tbody += '</tr>';    

                      }

티바디를 찾아 이런식으로 작업 한것을 응용하였다.

하지만 이것의 문제는 티바디로 뭉쳐져 있기 때문에 한 행을 삭제한 후 추가하면 삭제되었던 이전 행도 같이 복귀된다는 것이다. 그래서 찾은 다른 방법은

                     var sub_main = '<tr id = "menu'+i+'">'

                 +'<td cname="menu_name" style="text-align:left;">'+menu_name+'</td>'

                 +'<td cname="menu_amount" id="menu_amount'+i+'" style="text-align:right;">'+1+'</td>'

                 +'<td cname="menu_price" style="text-align:right;">'+menu_price+'</td>'

                 +'<td cname="ord_price" id="ord_amount'+i+'" style="text-align:right;">'+menu_price+'</td>'

                 +'<td cname="menu_function" style="text-align:center;"><button class="add" id="add'+i+'" style="background-color: #008CBA; margin-left :5px;" type="button">+</button><button class="sub" id = "sub'+i+'" style="background-color: #f44336;margin-left :5px;" type="button">-</button><button class="rmv" style="background-color: #e7e7e7;margin-left :5px;" type="button">X</button></td>' 

                 +'</tr>';

                 

                 $('#selected_menu').append(sub_main);

어펜드를 활용하는 것이다. 해당 테이블 아이디에 어펜드하는 이 함수역시 티바디와 간단하지만 각각으로 나눠져있어 제어하기가 수월했다.

2.두번째 고비

 첫번째와 맞물리는 작업인데 해당 행을 삭제하는 것이 은근 애를 먹였다. 지금와서 보면 고작 세 줄 이지만 난 이 세줄을 찾아 과장 조금 하여 100개의 사이트를 뒤졌다.

어느정도 정리가 되었지만 그래도 기존의 지저분한 삭제 소스이다

             $('.rmv').click(function(){

               var index = $('.rmv').index(this);

               alert(index);

               document.getElementById('selected_menu').deleteRow(index+2);  

                   

               var index = $('.rmv').index(this);

                var row = document.getElementById("menu+index);

                var table = row.parentNode;

                while ( table && table.tagName != 'TABLE' )

                    table = table.parentNode;

                if ( !table )

                    return;

                table.deleteRow(row.rowIndex);

               

               

               /*                  var index = $('.rmv').index(this);

               menu_name = '';

               document.getElementById('selected_menu').deleteRow('menu'+index);    

               return;

               alert(index);

            /*    var row = document.getElementById('menu'+index);

              row.parentNode.removeChild(row);

               

                return; 

               

               var $row = $(this).closest( "tr" );

               var obj = index+2;

               document.getElementById('selected_menu').deleteRow("menu3");   

                  return;  */

                       

                   return;

                   

                   

                  }); 

그리고 인덱스만을 활용한

                 

               $(document).on("click", ".rmv", function() {  

                

                     var index = $('.rmv').index(this);

                document.getElementById('selected_menu').deleteRow(index+2);  

                    checknm.splice(index,1);  

                    menu_amount.splice(index,1);

                    

                   }); 

                 

소스이다.

3.세번째 고비

 삭제가 작업까지 완료하였다. 이제 특정 행을 찾을 수 있으니 이 행의 값을 버튼에 따라 업데이트하면 되는 아주 간단한 작업만 남은 줄 알았다. 하지만 위의 소스로 살짝 알 수 있겠지만 기존에는 버튼 이벤트가 테이블 생성 함수 속에 있었다. 따라서 한번 클릭하였으나 테이블 데이터 생성된 수 만큼 이벤트가 발생하여 제어가 쉽지 않았다. 많은 헤맴과 수고 끝에 다큐멘트온을 활용하여 이벤트를 밖으로 꺼낼 수 있게 되었고 중복없는 이벤트를 처리할 수 있게 되었다.

4. 네번째 고비

 테이블 행을 찾게 되었고 그 행의 값을 읽는 것도 간단한 검색으로 할 수 있게 되었다. 하지만 데이터베이스와 달리 자바스크립트와 제이쿼리에서는 해당 특정 행을 수정하는 예는 많지 않았다. 이 역시 많은 헤맴끝에 

               $(document).on("click", ".add", function() {  

               

               var menu_addId = $(this).attr('id');

               var changeNum= menu_addId.replace(/[^0-9]/g,"");

               var $row = $(this).closest( "tr" );

               var menu_price = $row.find('[cname=menu_price]').text(); 

               

               var index = $('.add').index(this);

               menu_amount[index]++;

               var menu_cgam = menu_amount[index];

               $('#menu_amount'+changeNum+'').html(menu_cgam);

               $('#ord_amount'+changeNum+'').html(menu_cgam*menu_price);

               

                

                  

              }); 

이런 소스로 완성되었다.

여기서 중요한 것은 해당 이벤트의 id를 찾는 $(this).attr('id'); 와

문자속에서 숫자만 뽑는 값.replace(/[^0-9]/g,""); 이다

뻥 뚫린 길을 남들은 편하게 가고 있지만 나는 아직 산 속을 헤매듯 이리저리 막힌곳을 돌고 험한 길을 지나고 있다. 

그래도 목적지를 잃지 않고 인내를 갖고 끝까지 나가자.