php ajax可编辑表格,jquerAjax+php实现表格的增删改查(带数据库)

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

我采用了bootstrap进行表格的布局,不得不说,bootstrap这个东西的确是好用。

HTML结构

这是table

编号

用户名称

学校

年龄

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格式到前台数据库你自己看着来建 - - .