Tonny's Blog 关于博客
文章
主页 > JavaScript
jqueryAjax+php实现表格的增删改查(带数据库)
发布时间:2018-05-05 (21:13:48)    编辑:Tonny    热度:154

文章描述:jqueryAjax+php实现表格的增删改查(带数据库)
内容:

jqueryAjax+php实现表格的增删改查(带数据库)


今天给各位小伙伴,带来个表格的增删改查案例.

我采用了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格式到前台

数据库你自己看着来建 - - .


游客评论:



您的评论:

    姓名:



热门标签


推荐阅读
img
jQuery实验一(表格样式修改)
2018-05-05 (21:13:48)
img
jQuery实验二(试题选项修改)
2018-05-05 (21:13:48)
img
jQuery实验三(打地鼠游戏)
2018-05-05 (21:13:48)
img
Ajax方式提交表单数据
2018-05-05 (21:13:48)
img
JavaScript显示日历功能
2018-05-05 (21:13:48)