버튼 클릭시 테이블 행추가 그리고 셀안에 라디오 버튼 계속 생성..
본문
테이블에 추가라고 써있는 버튼 클릭할때마다 셀이 생성 되고
그 셀안에 라디오 버튼 그룹( EX) o사용 , o사용안함 )을 넣을려고 하는데요
라디오 버튼 그룹은 네임값이 계속 달라야 라디오 버튼 선택할때 오류가 없는데 행추가 하는 스크립트를 html 태그 추가하는것 밖에 몰라서요
어떻게 하면 될까요?../><
----------------------------------
$(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
ajax 써서 넣는수밖에 없어여
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>
