今天给各位小伙伴,带来个表格的增删改查案例.
我采用了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格式到前台