jquerAjax+php實現表格的增刪改查(帶資料庫)
阿新 • • 發佈:2019-02-11
今天給各位小夥伴,帶來個表格的增刪改查案例.
我採用了bootstrap進行表格的佈局,不得不說,bootstrap這個東西的確是好用。
HTML結構
初始資料載入<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是table</title> <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <table class="table table-bordered text-center table-hover"> <tr> <th class="text-center">編號</th> <th class="text-center">使用者名稱稱</th> <th class="text-center">學校</th> <th class="text-center">年齡</th> <th class="text-center">qq</th> <th class="text-center">工作</th> <th class="text-center">操作</th> </tr> </table> <!--模態框--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <span>編號:</span> <h4 class="modal-title ss" id="myModalLabel" style="display: inline-block" data-index="0">Modal title</h4> </div> <div class="modal-body"> <form class="form-horizontal" id="form"> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-10"> <input type="text" class="form-control ss" name="username" placeholder="使用者名稱稱" data-index="1"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-10"> <input type="text" class="form-control ss" name="school" placeholder="學校" data-index="2"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-10"> <input type="text" class="form-control ss" name="age" placeholder="年齡" data-index="3"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-10"> <input type="text" class="form-control ss" name="qq" placeholder="qq" data-index="4"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-10"> <input type="text" class="form-control ss" name="job" placeholder="工作" data-index="5"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" id="sign">Close</button> </div> </div> </div> </div>
修改按鈕refresh() function refresh(){ $.ajax({ url:"action/tableController.php", type:"get", success: function (res) { var data = jQuery.parseJSON(res) var str = ""; for(var i=0;i<data.length;i++){ str = "<tr><td>"+data[i].id+"</td><td>"+data[i].username+"</td><td>"+data[i].school+"</td><td>"+data[i].age+"</td><td>"+data[i].qq+"</td><td>"+data[i].job+"</td><td><button class='btn btn-primary btn-xs' id='change' data-toggle='modal' data-target='myModal'>修改</button><button class='btn btn-danger btn-xs' id='del' style='margin-left: 5px'>刪除</button></td></tr>"; $("table>tbody").append(str) } } }) }
var a = 0; $(document).on("click","#change",function(){ $('#myModal').modal() a = $(this).parents("tr").index() //全域性a用來查詢當前的下表 $(this).parents("tr").find("td:not(:last-child)").each(function () { var s = $(this).text() // console.log(s) var b = $(this).index() if(b>0){ $("#myModal .ss[data-index='"+b+"']").val(s) }else{ $("#myModal .ss[data-index='"+b+"']").text(s) } }) })
刪除按鈕
$(document).on("click","#del", function () {
var _this = $(this)
$.ajax({
url:"action/del.php",
type:"POST",
data:{
val:"del",
id:_this.parents("tr").find("td:eq(0)").text()
},
success: function (res) {
if(res=="1"){
_this.parents("tr").remove()
}else{
alert("刪除失敗")
}
}
})
})
修改按鈕
$(document).on("click","#sign",function(){
var data1 = $("#form").serialize()
var t = $("#myModalLabel").text()
$("#myModal").find("input").each(function () {
var q = $(this).val()
var s = $(this).data("index")
$("table>tbody").children("tr").eq(a).find("td").eq(s).text(q)
})
$.ajax({
url:"action/change.php?id="+t,
type:"POST",
data:data1,
success:function(res){
}
})
})
後臺修改
$username = $_POST["username"];
$school = $_POST['school'];
$age = $_POST['age'];
$qq = $_POST['qq'];
$job = $_POST['job'];
$t = $_GET["id"];
$_mysqli = new mysqli("localhost","root","","table");
if(!$_mysqli){
echo "資料庫連線失敗";
}
$_mysqli->set_charset("utf8");
$sql = "update table_info set username='$username',school='$school',age='$age',qq='$qq',job='$job' where id=$t";
$_mysqli->query($sql);
//echo $sql;
if($_mysqli->query($sql)){
echo "修改成功";
}else{
echo "修改失敗";
}
後臺刪除$del = $_POST["id"];
$_mysqli = new mysqli("localhost","root","","table");
if(!$_mysqli){
echo "資料庫連線失敗";
}
$_mysqli->set_charset("utf8");
$sql = "delete from table_info where id=$del";
$_mysqli->query($sql);
if($_mysqli->query($sql)){
echo 1;
}else{
echo 2;
}
後臺資料載入
$_mysqli = new mysqli();
$_mysqli->connect("localhost","root","","table");
if(mysqli_connect_error()){
echo "連線資料庫失敗了";
}
$_mysqli->set_charset("utf8");
$sql = "select * from table_info";
$result = $_mysqli->query($sql);
$data = array();
while($row=$result->fetch_assoc()){
$data[] = $row;
}
echo json_encode($data,JSON_UNESCAPED_UNICODE);//注意返回json格式到前臺
資料庫你自己看著來建 - - .