[12] JavaScript & JQuery - $(this) 사용법

[ 환경 ]
ㄴ php 7 
ㄴ JQuery 1.11.1

Q. 회원의 이름을 목록에서 각 각 수정하고 싶습니다.

ㄴ 반복문 안의 데이터를 사용해야 하는 상황

 

※ class, id를 생성 후 해당 값으로 이벤트를 주더라도 반복문 안에서 이벤트 진행시 첫번째 부분만 실행됨.

ㄴ 반복문으로 모두 같은 class나 id가 들어가기 때문. (이 경험을 겪어 보신 분은 종종 있을 겁니다. )

ㄴ 반복문에서 각각의 데이터를 컨트롤 하기 위하여 $(this)사용

---

 

1. html & PHP 코드

※ attridute data는 편하게 idx,type 등으로 바꿔서 사용이 가능하며 $(this)와 함께 데이터 추출시 씀.

<?php 
	$sql = "SELECT * FROM member WHERE use_yn ='Y'";
	$member = $conn->query($sql);
?>

<?php while($row = $member->fetch_array()){ ?>
    <td onclick="event.stopPropagation();">
	    <input type="text" class="name_<?=$row['idx']?>" value="<?=$row['name']?>">
	    <button type="button" class="nameBtn" data-idx="<?=$row['idx']?>">수정</button>
    </td>
<?php }?>

ㄴ 회원의 고유번호를 속성 data-idx를 만들어서 부여

ㄴ PHP로 회원목록 반복문으로 출력

ㄴ class이름 뒤에 고유번호를 부여 - 제이쿼리 이벤트 사용시 각 데이터 컨트롤 할 수 있도록

ㄴ td에 onclick은 tr에서 클릭이벤트 발생하는 부분을 막기위한 코드.

 

2. JQuery 코드 작성

<script>
    $(function(){
        $(".nameBtn").click(function(){
            var idx = $(this).data("idx"); // $(this)에 해당하는 data-idx값 변수
            var data = $(".name_"+idx).val(); // 각 회원의 이름

            $.ajax({
                url : "name_update.php",
                type : "POST",
                data : { idx : idx, data : data },
                success : function(result){
                    var result = result.trim();
                    switch(result){
                        case "success" :
                            alert("수정이 완료되었습니다.");
                            window.location.reload();
                            return false;
                        break;

                        case "fail" :
                            alert("수정을 실패하였습니다.");
                            return false;
                        break;
                    }
                }
            })
        })
    })
</script>

ㄴ 수정버튼 클릭이벤트를 만들고 $(this)를 사용하여 각 버튼의 data-idx를 변수로 선언

ㄴ data-idx값을 각 클래스명에 붙여넣어 반복문안의 각 회원의 고유번호를 추출

ㄴ ajax를 사용하여 PHP로 전송

 

3. PHP코드 작성

<?php 
	require_once 'config.php';

	$idx = $_POST['idx'];
	$name = $_POST['data'];

	$sql = "
		UPDATE member SET
			name = '{$name}'
		WHERE idx = '{$idx}'	
	";
	$execute = $conn->query($sql);
	if($execute){
		echo "success";
	}else{
		echo "fail";
	}
?>

ㄴ 회원고유번호, 회원이름을 추출하여 업데이트문 실행 / 성공실패 조건 리턴

 

4. 사이트 기능확인

 

ㄴ Q. 회원의 이름을 목록에서 각 각 수정하고 싶습니다.

- 작동완료