동적으로행 추가하면서 라디오그룹별 이름 넣기

동적으로행 추가하면서 라디오그룹별 이름 넣기

QA

동적으로행 추가하면서 라디오그룹별 이름 넣기

본문

ad80090474baaa31f59d0fd957ec4692_1464151094_1933.png

행 추가 하였을 경우 상단과 같은 화면이 나옵니다.

라디오박스 금액1 early-late-x 이 한그룹이며 금액2 early-late-x 도 행마다

다른 한 그룹입니다.

헌데

 1째줄 금액1 early-late-x 

 2째줄 금액1 early-late-x 

 3째줄 금액1 early-late-x 

모두 같은 이름을 갖네요...ㅜ
<a href="javascript:addTable();">추가+</a> 

          <table width="100%" border="0" cellpadding="0" cellspacing="0" >
            <tr>
              <td align="left" id="r-view" style="border:0"></td>
              </tr>
            </table>

<div id="a-table">
    <table width="95%" border="0" cellpadding="0" cellspacing="0">        
      <tr>
         <td align="left"><input type="checkbox" name="c-check" /></td>
         <td width="75" align="left">*금액</td>
         <td  align="left">

<input type="radio" name="pre1" value=" 1000"/>

<input type="radio" name="pre1" value=" 2000"/>

<input type="radio" name="pre1" value=" 3000"/>

</td>
      </tr>
   </table>                                         
</div> 

 

<script> 

function addTable() {
 $("#r-view").append($("#a-table").html());
}

</script>

 

추가+를 클릭하면 자바스크립트 함수를 호출하여 동적으로 행(레코드)이 증가하는 형식입니다.

이때 행을 추가하고 총금액을 내는 형식입니다.

헌데 행을 추가하고 나면 pre1이 이름을 갖는 라디오박스가 모두 이름이 동일하여

원하는 처리가 안되는데요.

행을 추가하면서 라디오박스 이름을 변경하면 될거같은데 attr을 이용하여 변경해보고 있으나

잘 안되어 조언을 구하고자 합니다.

 

이 질문에 댓글 쓰기 :

답변 2

어떻게 해볼까 하고 고민하다가 보니

저는 그냥 ajax로 땡겨오는게 가장 편하드라구요.

 

추가할 항목을 jquery.ajax.php 에 다음과 같이 만듭니다.


<?php
if(itype){ ?>
<div id="a-table">
    <table width="95%" border="0" cellpadding="0" cellspacing="0">
      <tr>
         <td align="left"><input type="checkbox" name="c-check" /></td>
         <td width="75" align="left">*금액</td>
         <td  align="left">
<input type="radio" name="pre1<?php echo $_POST['itype']?>" value="1000"/>
<input type="radio" name="pre1<?php echo $_POST['itype']?>" value="2000"/>
<input type="radio" name="pre1<?php echo $_POST['itype']?>" value="3000"/>
</td>
      </tr>
   </table>
</div>
<?php
}
?>

그리고 이번에는 추가를 클릭할 부분을 
아래와 같이 만듭니다.

<script>
$(document).ready(function(){
  var count = 0;//이 값을 전달해 name에 붙이려고 합니다.
  $("#btn1").click(function(){
    count++;
  var url = "./jquery.ajax.php";
    $.ajax({
      type:"post",
      url:url,
      data:{
        itype : count//이 값이 넘어가서 원래 name값 pre1뒤에 값이 붙어서 pre10,pre11이렇게 됩니다.
      },
      dataType: 'html',
      error: function(){alert('request error!');},
      complete:function(response){},
      success: function(data){
        $("#a-table").append(data);
      }
    })
});
});
</script>


너무 두서없이 썼는데
어떻게 도움이 될런지 모르겠습니다.

궁금한 사항 있으면 
댓글 남겨주세요~~

수고하세요!!


완전 감사합니다..

하루종일 자바스크립트랑 씨름해도 안되더니 이렇게 하니까 되네요...

감사 감사합니다.......

아오 머리가 다 아프네요..

좋은 하루 되세요..

저두 아는거 있음 다른 이에게 베풀며 살겠습니다.~ 

답변을 작성하시기 전에 로그인 해주세요.
전체 2

회원로그인

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