테이블 버튼으로 입력된 td값 변경하기와 tr 제거.

Question

중간중간 만질 시간도 없고 실력도 부족하다보니 진행이 아주 느리네요 ㅠ3일째 붙잡고 있는 문제는 한 테이블에 ajax를 통해 불러온 리스트를 클릭하면 만들어 둔 옆 테이블에 값을추가하여 제어하는 작업입니다.옆 테이블에 추가하는 것 까지 했으나 함께 붙는 버튼이벤트에서 또 막히네요.감사하게도 조언을 받아 행 제거를 어느정도 흉내를 냈으나 삭제된 값을 다시 추가했을 때다시 제거하지 못하는 점, 제거한 행이 새로 추가되는 행이 생기면 같이 불러와지는 점+,-버튼을 눌렀을 때 이미 불러와진 행의 td값을 동적으로 바꾸지 못하는 점이 아직 숙제로 남아있습니다.구글링을하며 찾아보고 있으나 배열을 이용하거나 다시 재 호출을 하면 되겠구나 라고 막연히 오솔길이라도보이긴 한데 시간은 쫓기고 험난하다보니 다시 조언을 구하게 되었습니다. 현재 작업 된 소스입니다. var check=""; var menu_name; var menu_price; var menu_amount = new Array(); var tbody = ""; var checknm = new Array(); var a=1; var i = 0; $("#select_menu tbody").on('click','tr',function(){ var $table = $("#selected_menu"); var $row = $(this).closest( "tr" ); var checkbt = $(this); var tr = checkbt.parent(); var td = tr.children(); menu_name = $row.find('[cname=menu_name]').text(); menu_price = $row.find('[cname=menu_price]').text(); var num = checknm.indexOf(menu_name); var isExist = (checknm.indexOf(menu_name)!== -1) if(isExist == false){ menu_amount.push(a); checknm.push(menu_name); checknm.push(menu_price); checknm.push(menu_amount); tbody += ''; tbody += ''+menu_name+''; tbody += ''+menu_amount[i]+''; tbody += ''+menu_price+''; tbody += ''+menu_amount[i]*menu_price+''; tbody += ''; tbody += ''; $table.find('tbody').html(tbody); i++; } $('.add').click(function(){ var index = $('.add').index(this); var $row = $(this).closest( "tr" ); menu_amount[index]++; alert(menu_amount[index]); }); $('.sub').click(function(){ var index = $('.sub').index(this); menu_amount[index]--; alert(menu_amount[index]); }); $('.rmv').click(function(){ var index = $('.rmv').index(this); alert(index); document.getElementById('selected_menu').deleteRow(index+2); /* var row = document.getElementById('menu'+index); row.parentNode.removeChild(row);*/ }); }); 소스는 지금 불러와진 행을 클릭했을때 옆 테이블에 값을 추가하고 이후 버튼을 통해 이벤트를 발생시키는 것인데 지저분하기도 할뿐더러 제대로 기능을 구현하지 못하고 있습니다; 염치없게 답을 바라진 못하고 조금이라도 진행 될 수 있게 조언 부탁드립니다.1. +버튼을 눌렀을때 해당 menu_amount의 값이 +12.-버튼을 눌렀을 때 해당 menu_amount의 값이 -13. x버튼을 눌렀을 때 해당 td삭제 -삭제는 흉내냈으나 다시 재 실행이안되는 점, - 주석으로 처리 된 부분으로 삭제한다면 마지막 한 행이 남게 되는점;이런 문제가 있습니다..;

초코쪼꼬 · Accepted Answer

spinner 개념을 아셨으니.. 해당 selector만 잡아주면 되겠네요.. 내가 클릭한 &#43;/- 버튼이 같은 행에 있는 다른 td의 값의 가감연산을 하면 되겠네요. 그렇다면 가감연산을 하는 function을 만들어서 argument를 selector와 버튼값을받고 &#43; 눌렀을때는 selector의값을 &#43;&#43;시키고 -눌렀을때는 selector의 값을 --시키면 될거같은데요..

배고파서서러워요 · Answer

this, selector, remove, add가 힌트인데요.일단 미리 추가될 row를 이런식으로 준비 하시고, +늘 누르시 tbody 안에 after로 추가되게 처리.삭제시 삭제를 클릭한 위치서부터 parentNode를 찾아서 tr을 그대로 remove() 를 이용해서 삭제하시면 됩니다.td도 마찬가지로 parentNode를 찾아가서 삭제, 해당 childNode에 입력하는 방식으로 하시면 됩니다.insertCell, insertRow를 이용하여 추가하시면 쓰신대로 자유로운 추가삭제가 힘들죠....(중간줄을 삭제처리하면 꼬이기 쉬워서... 물론 parent찾아서 하실 수 있습니다.)메일 주소 알려주시면 예전에 만들었던 참고용 샘플 소스 드릴게요.

초코쪼꼬 · Answer

어제 &#43;- 는 spinner를 보라고 답글 드렸던거 같은데.. 안읽어보셨나보네요.

밤과라임 · Answer

&#64;배고파서 서러워요정말 감사합니다. 안그래도 계속 진행한다해도 깔끔해질 수 없어보여 애먹었는데 길이 확 뚫힌 기분이네요.cupeanimus&#64;naver.com 입니다. 도움으로 오늘 드디어 작업을 완성할 수 있을 것 같습니다.친절하게 소스까지 주시고..복받으세요;

밤과라임 · Answer

&#64;수송대원 아 제가 깜빡하고 답을 안달았네요; 수송대원님 도움으로 조금 헤쳐나가긴 했는데 spinner는 해당 td에 값을 바꾸는 거라서 한 tr안에 버튼이 있는 td와 값이 되는 td가 달라서 spinner로는 너무 힘들어 보여서 다른 길을 찾았습니다.혹시 spinner를 버튼 하나씩 따로 분리해서 원하는 값 경로를 적어 바꿀수가 있나요? 이전 질문에 제가 &#43;-개념이 spinner와 같다고 생각했지만 원리는 같지만 뭉쳐진 spinner를 해부해서 응용하기에는 너무 버겁게 느껴졌습니다..;;질문을 제가 확실히 하지 못해 분명 제가 말한 개념에 대한 답을 수송대원님이 주셨지만 제가 살리지 못했습니다;; 답변 감사합니다

배고파서서러워요 · Answer

밤과라임 / 보내드렸습니다. 확인해보세요~

밤과라임 · Answer

&#64;배고파서서러워요출장갔다가 이제 복귀하여 확인하게 되었네요.감사합니다. 많은 공부와 도움이 되었습니다.

밤과라임 · Answer

&#64;수송대원아님감사합니다. 좋은 조언 많은 도움이 되었습니다. 이것저것 함께하늘 조금시도하다 미루고 미루고 하면서 이제야 마무리 짓고 있는데 두 분의 도움으로 배우고 해결하게 되었습니다.

테이블 버튼으로 입력된 td값 변경하기와 tr 제거.

8개의 답변

Q&A 목록