버튼 클릭시 테이블 행추가 그리고 셀안에 라디오 버튼 계속 생성..
테이블에 추가라고 써있는 버튼 클릭할때마다 셀이 생성 되고
그 셀안에 라디오 버튼 그룹( EX) o사용 , o사용안함 )을 넣을려고 하는데요
라디오 버튼 그룹은 네임값이 계속 달라야 라디오 버튼 선택할때 오류가 없는데 행추가 하는 스크립트를 html 태그 추가하는것 밖에 몰라서요
어떻게 하면 될까요?../><
----------------------------------
$(document).on("click","input[name=account_addcell]",function(){ var addStaffText = '
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]"
... 설명을 잘 못하겠네요;;
</p>
<p><input type="button" name="account_addcell" value="추가">
<table>
<tr></tr>
</table></p>
<p><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>';</p>
<p> var trHtml = $( "tr:last" ); //last를 사용하여 trStaff라는 명을 가진 마지막 태그 호출
trHtml.after(addStaffText); //마지막 trStaff명 뒤에 붙인다.</p>
<p> });</p>
<p> $(document).on("click","button[name=delaccountcell]",function(){
//var trHtml = $(this).parent().parent();
// trHtml.remove(); //tr 테그 삭제
});
});
</script></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
