jquery ajax 로 dynamic 하게 항목(row) 지우기(remove)

목록으로 나열되어있는 항목들이 있을때 하나씩 버튼등을 눌러서 하나씩 삭제할때 값을 전송하여 화면 전체가 reloading 되면 화면이 깜빡이는 현상과 스크롤이 이동되는 현상을 격어야 한다.

 

간단하게 ajax 를 사용해서 서버단에서 삭제 처리와 목록요소만 지우는 방법으로 처리해보자.

 

php 사용예를 들어서 다음처럼 목록이 화면에 출력이 되고

....

<?php
for( $i = 0 ;$i < count($_list) ; $i++ ){
?>
    <tr>
        <td>
            <span class="js_del_row" data-no="<?php echo $_list[$i]['no']?>">x</span>
        </td>
    </tr>
<?php
}
?>

....

<script type="text/javascript">

$(document).ready(function(){
    $(".js_del_row").css("cursor","pointer").click(function(){
        var item = $(this);
        var js_del_no =  item.attr("data-no");
        if( js_del_no ){
            if( confirm("삭제 하시겠습니까?\n삭제된 DATA는 복구할수없습니다.") ){
                $.post( "del.php", { 'mode': "DELETE", 'no': js_del_no }, function( data ) {
                    if( data.res=="OK" ){
                        alert("삭제 되었습니다.");
                        item.closest("tr").remove();
                    }else alert( "Data Loaded: " + data.res );
                }, "json");
            }
        }else alert("Error");
    });
});

</script>

php 에는

<?php

// .....

if( $mode=="DELETE"){

    if( !$no || !preg_match('/^[0-9]*$/',$no) ) echo json_encode(array("res"=>"잘못된 접근입니다."));

    $query = " delete from tablename where no = '{$no}' ";

    // .....
    echo json_encode(array("res"=>"OK"));
}

// ....

?>

처럼 처리하면 x 클릭시 no 값을 ajax 로 전달해서 DB 에서 값을 삭제하고 결과가 OK 면 jquery 에서 해당하는 row 에서 closest 으로 상위의 tr 태그를 찾아서 해당 row 를 삭제하게 된다.