<!--<!DOCTYPE html>-->
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="public/bootstrap/css/bootstrap.min.css">
<script src="public/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="public/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
<style type="text/css">
.add{
width: 100px;
height: 30px;
background-color: #117A8B;
border-radius: 3px;
text-align: center;
line-height: 30px;
color: white;
}
.add:hover{
cursor: pointer;
}
.plsc{
width: 100px;
height: 30px;
background-color: #117A8B;
border-radius: 3px;
text-align: center;
line-height: 30px;
color: white;
}
.plsc:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="add" data-toggle="modal" data-target="#myModal">添加 </div>
<form class="form-inline">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" placeholder="请输入查询的姓名" >
<label for="banji">班级：</label>
<input type="text" class="form-control" id="banji" placeholder="请输入查询的班级">
<div class="add" onclick="selectData()">查询</div>
</form>
<table class="table" border="1" cellspacing="0" cellpadding="0">
</table>
<span onclick='pldelete()' class="plsc">批量删除</span>
<!--======================添加模态框================-->
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">添加页面</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<form>
<div class="form-group">
<label for="xuh">序号：</label>
<input type="text" class="form-control" id="xuh">
</div>
<div class="form-group">
<label for="xh">学号：</label>
<input type="text" class="form-control" id="xh">
</div>
<div class="form-group">
<label for="xm">姓名：</label>
<input type="text" class="form-control" id="xm">
</div>
<div class="form-group">
<label for="xb">性别：</label>
<input type="text" class="form-control" id="xb">
</div>
<div class="form-group">
<label for="sr">出生日期：</label>
<input type="text" class="form-control" id="sr">
</div>
<div class="form-group">
<label for="bj">班级：</label>
<input type="text" class="form-control" id="bj">
</div>
</form>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="add()">添加</button>
</div>
</div>
</div>
</div>
<!--======================修改模态框================-->
<!-- 模态框 -->
<div class="modal fade" id="xiugaiModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">修改页面</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<form>
<div class="form-group">
<label for="xuh">序号：</label>
<input type="text" class="form-control" id="xuh1">
</div>
<div class="form-group">
<label for="xh">学号：</label>
<input type="text" class="form-control" id="xh1">
</div>
<div class="form-group">
<label for="xm">姓名：</label>
<input type="text" class="form-control" id="xm1">
</div>
<div class="form-group">
<label for="xb">性别：</label>
<input type="text" class="form-control" id="xb1">
</div>
<div class="form-group">
<label for="sr">出生日期：</label>
<input type="text" class="form-control" id="sr1">
</div>
<div class="form-group">
<label for="bj">班级：</label>
<input type="text" class="form-control" id="bj1">
</div>
</form>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="modify()">修改</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var tab = document.getElementsByTagName("table")[0];
var colorattr = ["table-primary","table-success","table-danger","table-info","table-warning","table-active","table-secondary"];
loadData('','');
function selectData(){
var name = document.getElementById("name").value;
var banji = document.getElementById("banji").value;
loadData(name,banji);
}
function loadData(a,b){
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
"type":"chaxun",
"name":a,
"banji":b
},
dataType:"json",//可以返回数组
success:function(data){
var str="";
str +="<tr><td>全选<input type='checkbox' onclick='qx(this)'/></td><td>序号</td><td>学号</td><td>姓名</td><td>性别</td><td>出生日期</td><td>班级</td><td>操作</td></tr>";
for(var i= 0;i<data.length;i++){
str +="<tr class = "+colorattr[i]+">";
str +="<td><input class='ckinput' type='checkbox' value='"+data[i][0]+"' /></td>";
//+的作用跟PHP里的{}一样，不拼上+识别不了
for(var j = 0;j<data[i].length;j++){
str +="<td>"+data[i][j]+"</td>";
}
str +="<td><button type='button' class='btn btn-primary' data-toggle='modal' data-target='#xiugaiModal' onclick ='add_modify(""+data[i]+"")'>修改</button> <button type='button' class='btn btn-info' onclick ='deleteData(""+data[i][0]+"")'>删除</button></td>";
str+="</tr>"; //括号里传的是数组的每一项的值属于字符串；
}
tab.innerHTML = str;
}
});
}
function add(){
var xuh = document.getElementById("xuh").value;
var xh = document.getElementById("xh").value;
var xm = document.getElementById("xm").value;
var xb = document.getElementById("xb").value;
var sr = document.getElementById("sr").value;
var bj = document.getElementById("bj").value;
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
"type":"tianjia",
"xuh":xuh,
"xh":xh,
"xm":xm,
"xb":xb,
"sr":sr,
"bj":bj
},
dataType:"text",
success:function(data){
if(data.trim() == "ok"){//php返回的data带有空格需要加trim()去掉两头的空格
alert("添加成功!");
loadData('','');//重新加载页面
}
}
});
}
function add_modify(at){
var attr = at.split(",");
//[ "6", "109", "王芳", "女", "1975-02-10 00:00:00", "95031" ]
//"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
//"|a|b|c".split("|") //将返回["", "a", "b", "c"]
var attr_id = ["xuh1","xh1","xm1","xb1","sr1","bj1"];
for(var i=0;i<attr.length;i++){
document.getElementById(attr_id[i]).value = attr[i];
}
}
function modify(){
var xuh1 = document.getElementById("xuh1").value;
var xh1 = document.getElementById("xh1").value;
var xm1 = document.getElementById("xm1").value;
var xb1 = document.getElementById("xb1").value;
var sr1 = document.getElementById("sr1").value;
var bj1 = document.getElementById("bj1").value;
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
"type":"xiugai",
"xuh1":xuh1,
"xh1":xh1,
"xm1":xm1,
"xb1":xb1,
"sr1":sr1,
"bj1":bj1
},
dataType:"text",
success:function(data){
if(data.trim() == "ok"){
alert("修改成功!");
loadData('','');
}
}
});
}
function deleteData(id){
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
"type":"shanchu",
"id":id
},
dataType:"text",
success:function(data){
if(data.trim() == "ok"){
alert("删除成功!");
loadData('','');
}
}
});
}
function qx(t){
var ckinput = document.getElementsByClassName("ckinput");
for(var i=0;i<ckinput.length;i++){
if(t.checked){
ckinput[i].checked = true;
}else{
ckinput[i].checked = false;
}
}
}
function pldelete(){
var ckinput = document.getElementsByClassName("ckinput");
var str = "";
var bs = 0;
for(var i=0;i<ckinput.length;i++){
if(ckinput[i].checked){
bs++;//判断复选框有没有选中;
str +=ckinput[i].value+"','";
}
}
if(bs==0){
alert("至少选择一项");
}else{
// 输出12','34','需要去掉后三位
str = str.substr(0,str.length-3);
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
"type":"plshanchu",
"str":str
},
dataType:"text",
success:function(data){
if(data.trim() == "ok"){
alert("批量删除成功!");
loadData('','');
}
}
});
}
}
</script>
主页
<?php
//Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。
header("Content-type: text/html; charset=utf-8");
$type = $_POST['type'];
$conn = new mysqli("localhost","root","","ceshi");
$conn->connect_error?die("链接失败"):"";
switch($type){
case "chaxun":
$name = $_POST['name'];
$banji = $_POST['banji'];
$sql = "select * from student where sname like '%{$name}%' and class like '%{$banji}%'";
$result = $conn->query($sql);
$attr = $result->fetch_all();
echo json_encode($attr);
break;
case "tianjia":
$xuh = $_POST['xuh'];
$xh = $_POST['xh'];
$xm = $_POST['xm'];
$xb = $_POST['xb'];
$sr = $_POST['sr'];
$bj = $_POST['bj'];
$sql = "insert into student values('{$xuh}','{$xh}','{$xm}','{$xb}','{$sr}','{$bj}')";
if($result=$conn->query($sql)){
echo "ok";
}
break;
case "xiugai":
$xuh1 = $_POST['xuh1'];
$xh1 = $_POST['xh1'];
$xm1 = $_POST['xm1'];
$xb1 = $_POST['xb1'];
$sr1 = $_POST['sr1'];
$bj1 = $_POST['bj1'];
$sql = "update student set sno='{$xh1}',sname = '{$xm1}',ssex = '{$xb1}',sbirthday = '{$sr1}',class = '{$bj1}' where id ='{$xuh1}'";
if($result=$conn->query($sql)){
echo "ok";
}
break;
case "shanchu":
$id= $_POST['id'];
$sql = "delete from student where id = '{$id}'";
if($result=$conn->query($sql)){
echo "ok";
}
break;
case "plshanchu":
$str = $_POST['str'];
$sql = "delete from student where id in ('{$str}')";
if($result=$conn->query($sql)){
echo "ok";
}
break;
}
?>
php页
