SIR
목록으로

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

초초굽
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 10,404
답변 2
목록

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

그 셀안에 라디오 버튼 그룹( 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 테그 삭제
        });

 

#radio #javascript #jquery #행추가 #radio버튼

답변 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]"

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

 

 

Copy 
<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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

ajax 써서 넣는수밖에 없어여 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고