반응형
ajax jquery php 사용해서 Add Edit Delete 하기 (LIVE TABLE 구현) - 동적테이블
#화면
#index.php
<html>
<head>
<title>Live Table</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">Live Table Add Edit Delete using Ajax Jquery in PHP Mysql</h3><br />
<!-- 이곳에 ajax에서 받아온 데이터를 뿌릴 것이다 -->
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
//데이터를 ajax에서 가져와서 뿌려준다.
function fetch_data(){
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
})
}
//리스트 조회 함수 호출
fetch_data();
//추가버튼 클릭했을 때
$(document).on('click','#btn_add',function(){
var first_name = $('#first_name').text();
var last_name = $('#last_name').text();
if(first_name == '')
{
alert("성을 입력해 주세요");
return false;
}
if(last_name == '')
{
alert("이름을 입력해 주세요");
return false;
}
$.ajax({
url:"insert.php",
method:"POST",
data:{first_name:first_name,last_name:last_name},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
})
});
//수정하기 함수
function edit_data(id, text, column_name){
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id,text:text,column_name},
dataType:"text",
success:function(data){
alert(data);
}
});
}
//성 칼럼에서 text 필드에 입려후 마우스를 바깥에 클릭했을때
$(document).on('blur','.first_name', function(){
var id = $(this).data("id1");
var first_name = $(this).text();
edit_data(id, first_name, "first_name");
});
//이름 칼럼에서 text 필드에 입려후 마우스를 바깥에 클릭했을때
$(document).on('blur','.last_name', function(){
var id = $(this).data("id2");
var first_name = $(this).text();
edit_data(id, first_name, "last_name");
});
$(document).on('click','.btn_delete', function(){
var id = $(this).data("id3");
if(confirm("삭제하시겠습니까?")){
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
</script>
#select.php
<?php
$connect = mysqli_connect("localhost", "root", "비번","db명");
$output = '';
$sql = "SELECT * FROM users ORDER BY id DESC";
//first_name,last_name
$result = mysqli_query($connect, $sql);
$output.= '<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">id</th>
<th width="40%">성</th>
<th width="40%">이름</th>
<th width="10%">삭제</th>
</tr>';
if(mysqli_num_rows($result)>0)
{
while($row=mysqli_fetch_array($result))
{
$output.='
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>
<td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>';
}else
{
$output.='<tr>
<td colspan="4">데이터가 없습니다.</td>
</tr>';
}
$output.= '</table></div>';
echo $output;
?>
#insert.php
<?php
$connect = mysqli_connect("localhost", "root", "비번","db명");
$sql = "insert into users(first_name, last_name) values('".$_POST["first_name"]."','".$_POST["last_name"]."')";
if(mysqli_query($connect, $sql))
{
echo '추가 성공';
}
?>
#edit.php
<?php
$connect = mysqli_connect("localhost", "root", "비번","db명");
$id = $_POST["id"];
$text = $_POST["text"];
$column_name = $_POST["column_name"];
$sql = "UPDATE users SET ".$column_name."='".$text."' WHERE id='".$id."'";
if(mysqli_query($connect, $sql))
{
echo '수정 되었습니다';
}
?>
#delete.php
<?php
$connect = mysqli_connect("localhost", "root", "비번","db명");
$sql = "DELETE FROM users where id = '".$_POST["id"]."'";
if(mysqli_query($connect, $sql))
{
echo '삭제 되었습니다';
}
?>
반응형
'PHP 박살내기 > php ajax json' 카테고리의 다른 글
| php 좋아요 기능& 알림기능 구현 1 (로그인 부분) (0) | 2017.09.19 |
|---|---|
| PHP 객체지향 방식으로 Mysql Ajax 조회 추가 수정 삭제 (0) | 2017.09.18 |
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기3 (수정) (1) | 2017.09.15 |
| php mysql ajax bootstrap 모달창을 이용해서 동적 웹페이지 만들기2 (삽입) (0) | 2017.09.14 |
| php mysql ajax bootstrapModal을 이용해서 동적 웹페이지 만들기1 (조회- 리스트 뿌리기) (3) | 2017.09.14 |
댓글