jquerAjax+php実装テーブルの削除変更(データベース付き)

今日は皆さんに、表の削除例を持ってきてください.
私はbootstrapを採用して表のレイアウトを行い、bootstrapというものは確かに使いやすいと言わざるを得ません.
HTML構造

    
    
    
    
    


    

        

            
  
            
    
            
  
            
  
            
qq
            
  
            
  
        
    

    
    

        

            

                

                    ×
                      :
                    
Modal title
                
                

                    

                        

                            
                            

                                
                            
                        
                        

                            
                            

                                
                            
                        
                        

                            
                            

                                
                            
                        
                        

                            
                            

                                
                            
                        
                        

                            
                            

                                
                            
                        


                    
                
                

                    Close
                
            
        
    

データ・ロード

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[i].username+""+data[i].school+""+data[i].age+""+data[i].qq+""+data[i].job+"    ";
                            $("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     

データベースを で て してください.