버튼 클릭시 테이블 행추가 그리고 셀안에 라디오 버튼 계속 생성..

버튼 클릭시 테이블 행추가 그리고 셀안에 라디오 버튼 계속 생성..

QA

버튼 클릭시 테이블 행추가 그리고 셀안에 라디오 버튼 계속 생성..

본문

테이블에 추가라고 써있는 버튼 클릭할때마다 셀이 생성 되고

그 셀안에 라디오 버튼 그룹( EX) o사용 , o사용안함 )을 넣을려고 하는데요

라디오 버튼 그룹은 네임값이 계속 달라야 라디오 버튼 선택할때 오류가 없는데 행추가 하는 스크립트를 html 태그 추가하는것 밖에 몰라서요 

어떻게 하면 될까요?../><

2049926090_1611064450.7686.png

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

$(document).on("click","input[name=account_addcell]",function(){       
            var addStaffText = '<tr>'+
                '    <td>'+'번호'+'</td>'+
                '    <td>'+'<input type="text" class="form-control">'+'</td>'+'<td>'+'<input type="text" class="form-control brc-on-focusd-inline-block mr5" />'+'</td>'+'<td>'+'<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="accountRadioOptions6" checked="checked"><label class="form-check-label">예</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="accountRadioOptions6"><label class="form-check-label">아니오</label></div>'+'</td>'+'<td>'+'</td>'+'</tr>';

            var trHtml = $( "tr:last" ); //last를 사용하여 trStaff라는 명을 가진 마지막 태그 호출
            trHtml.after(addStaffText); //마지막 trStaff명 뒤에 붙인다.

        });



        $(document).on("click","button[name=delaccountcell]",function(){
           //var trHtml = $(this).parent().parent();
           // trHtml.remove(); //tr 테그 삭제
        });

 

이 질문에 댓글 쓰기 :

답변 2

radio name 값을 맞추는 것이야 간단한 것이지만 

form summit 처리가 더 머리 아플 것 같은데요 

일단 저런 ui는 폼엘리먼트의 name을 배열을 써서 맞추고요 

name="name[]" 이런식으로요

같은 tr 안의 input 값들이 한 row로 처리되어야 하기 때문에요

create야 마구잡이로 insert 시키면 될테지만

update를 위해 기존 데이터들을 로드할 때 또 신경을 써야합니다.

그렇게 따지면 name="name[data_row_id]" 이런 식으로 

디비의 primary key를 이용하는게 좋을 수도 있습니다. 

insert 해야될 tr 과 update 해야될 tr 을 name key 로 구분해도 좋고요. 

insert: name="name[new_121212]"

update: name="name[121212]"

... 설명을 잘 못하겠네요;; 

 

 


<input type="button" name="account_addcell" value="추가">
<table>
    <tr></tr>  
</table>
<script>
$(function() {
    $(document).on("click","input[name=account_addcell]",function(){       
        var k = new Date().getTime();
        var addStaffText = '<tr>'+
            '    <td>'+'번호'+'</td>'+
            '    <td>'+'<input type="text" class="form-control">'+'</td>'+'<td>'+'<input type="text" class="form-control brc-on-focusd-inline-block mr5" />'+'</td>'+'<td>'+'<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="accountRadioOptions[' + k + ']" checked="checked"><label class="form-check-label">예</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="accountRadioOptions[' + k + ']"><label class="form-check-label">아니오</label></div>'+'</td>'+'<td>'+ k +'</td>'+'</tr>';
        var trHtml = $( "tr:last" ); //last를 사용하여 trStaff라는 명을 가진 마지막 태그 호출
        trHtml.after(addStaffText); //마지막 trStaff명 뒤에 붙인다.
    });
    $(document).on("click","button[name=delaccountcell]",function(){
       //var trHtml = $(this).parent().parent();
       // trHtml.remove(); //tr 테그 삭제
    });
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 20
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT