主页面===================================================================================================================================
<!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" />
<title>Document</title>
<script src="public/bootstrap/js/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>
<link rel="stylesheet" type="text/css" href="public/bootstrap/css/bootstrap.min.css"/>
<style type="text/css">
.anniu{
background-color: #F5C6CB;
height: 50px;
}
.btn-primary{
100px;
margin-top: 5px;
float: left;
}
.btn{
margin-left: 10px;
}
.sousuo{
200px;
margin-top: 5px;
margin-left: 10px;
float: left;
}
</style>
</head>
<body>
<div class="anniu">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModaladd" onclick="zengjia()">新增</button>
<button class="btn btn-primary" onclick="chaxun()">搜索</button>
<input class="form-control sousuo" placeholder="请输入编号" id = "selbh">
<input class="form-control sousuo" placeholder="请输入车型" id = "selcx">
</div>
<table class="table">
</table>
<!-- 模态框 ----------------------------------------------------------------------->
<div class="modal fade" id="myModaladd">
<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">X</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<label>编号:</label>
<input class="form-control upd" placeholder="请输入编号" id = "addbh">
<label>车型:</label>
<input class="form-control upd" placeholder="请输入车型" id = "addcx">
<label>油耗:</label>
<input class="form-control upd" placeholder="请输入油耗" id = "addyh">
<label>动力:</label>
<input class="form-control upd" placeholder="请输入动力" id = "adddl">
<label>价格:</label>
<input class="form-control upd" placeholder="请输入价格" id = "addjg">
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" onclick="xinzeng()" class="btn btn-secondary" data-dismiss="modal">提交</button>
</div>
</div>
</div>
</div>
<!-- 模态框 ----------------------------------------------------------------------->
</body>
</html>
<script type="text/javascript">
chaxun();
/*查询=================================================================================*/
function chaxun(){
var bh = document.getElementById("selbh").value;
var cx = document.getElementById("selcx").value;
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
typ : "sel",
bh : bh,
cx : cx
},
dataType:"json",
success:function(sel){
var tab = document.getElementsByTagName("table")[0];
var col = ["table-danger","table-success","table-warning","table-active","table-danger","table-success","table-warning","table-active","table-danger","table-success","table-warning","table-danger","table-active","table-success","table-warning","table-active"];
var str = "<tr class = table-active><td><input type='checkbox' id = 'qx' onclick = 'qx()'/><button class='btn btn-danger btn-sm' onclick = 'pl()'>批量删除</button></td><td>编号</td><td>车型</td><td>油耗</td><td>动力</td><td>价格</td><td>操作</td></tr>";
for (var i = 0;i<sel.length;i++) {
str += "<tr class = "+col[i]+" ><td><input class = 'fx' name = '""+sel[i][0]+""' type='checkbox'/></td>";
for (var j = 0;j<sel[i].length;j++) {
str += "<td>"+sel[i][j]+"</td>";
}
str += "<td><button class='btn btn-danger btn-sm' data-toggle='modal' data-target='#myModaladd' onclick = 'xiugai(""+sel[i]+"")'>修改</button><button class='btn btn-danger btn-sm' onclick = 'shanchu(""+sel[i][0]+"")'>删除</button></td></tr>";
}
tab.innerHTML = str;
}
});
}
/*查询=================================================================================*/
/*新增=================================================================================*/
function xinzeng(){
var bh = document.getElementById("addbh").value;
var cx = document.getElementById("addcx").value;
var yh = document.getElementById("addyh").value;
var dl = document.getElementById("adddl").value;
var jg = document.getElementById("addjg").value;
var zt = document.getElementById("addbh").readOnly;
zt = (zt)?1:2;
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
typ : "add",
bh : bh,
cx : cx,
yh : yh,
dl : dl,
jg : jg,
zt : zt
},
dataType:"text",
success:function(add){
alert(add);
chaxun();
}
});
}
/*新增=================================================================================*/
/*删除=================================================================================*/
function shanchu(del){
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
typ : "del",
bh : del
},
dataType:"text",
success:function(del){
alert(del);
chaxun();
}
});
}
/*删除=================================================================================*/
/*增加=================================================================================*/
function zengjia(){
var attr = document.getElementsByClassName("upd");
attr[0].removeAttribute("readonly");
for(var i =0;i<attr.length;i++){
document.getElementsByClassName("upd")[i].value = '';
}
}
/*增加=================================================================================*/
/*修改=================================================================================*/
function xiugai(upd){
var attr = upd.split(",")
document.getElementsByClassName("upd")[0].setAttribute("readonly","readonly");
for(var i =0;i<attr.length;i++){
document.getElementsByClassName("upd")[i].value = attr[i];
}
}
/*修改=================================================================================*/
/*全选=================================================================================*/
function qx(){
var fx = document.getElementsByClassName("fx");
for (var i = 0;i<fx.length;i++) {
fx[i].checked = document.getElementById("qx").checked?true:false;
}
}
/*全选=================================================================================*/
/*批量=================================================================================*/
function pl(){
var str = "";
var fx = document.getElementsByClassName("fx");
for (var i = 0;i<fx.length;i++) {
var zhi = fx[i].checked?fx[i].name:"";
str += zhi;
}
str = str.replace(/""/g,"','");
str = str.replace(/"/g,"");
console.log(str)
$.ajax({
type:"post",
url:"chuli.php",
async:true,
data:{
typ : "pl",
str : str
},
dataType:"text",
success:function(plsc){
alert(plsc);
chaxun();
}
});
}
/*批量=================================================================================*/
</script>
主页面===================================================================================================================================
处理页面===================================================================================================================================
<?php
$sqllianjie = new mysqli("localhost","root","","ceshi1");
$sqllianjie->connect_error?die("失败"):"";
mysqli_set_charset($sqllianjie,"utf8");
$typ = $_POST['typ'];
switch($typ){
/*查询==============================================================*/
case"sel":
$bh = $_POST['bh'];
$cx = $_POST['cx'];
$sqlyuju = "select * from car where code like '%{$bh}%' and name like '%{$cx}%'";
$sqlzhixing = $sqllianjie->query($sqlyuju);
$sqljieshou = $sqlzhixing->fetch_all();
echo json_encode($sqljieshou);
break;
/*查询==============================================================*/
/*新增==============================================================*/
case"add":
$bh = $_POST['bh'];
$cx = $_POST['cx'];
$yh = $_POST['yh'];
$dl = $_POST['dl'];
$jg = $_POST['jg'];
$zt = $_POST['zt'];
if($zt == 2){
$sqlyuju = "insert into car values('{$bh}','{$cx}','{$yh}','{$dl}','{$jg}')";
}else{
$sqlyuju = "update car set name = '{$cx}',oil = '{$yh}',powers = '{$dl}',price = '{$jg}' where code = '{$bh}'";
}
if($sqlzhixing = $sqllianjie->query($sqlyuju)){
echo "操作成功";
}else{
echo "操作失败";
}
break;
/*新增==============================================================*/
/*删除==============================================================*/
case"del":
$bh = $_POST['bh'];
$sqlyuju = "delete from car where code = '{$bh}'";
if($sqlzhixing = $sqllianjie->query($sqlyuju)){
echo "操作成功";
}else{
echo "操作失败";
}
break;
/*删除==============================================================*/
/*批量==============================================================*/
case"pl":
$str = $_POST['str'];
$sqlyuju = "delete from car where code in ('{$str}')";
if($sqlzhixing = $sqllianjie->query($sqlyuju)){
echo "操作成功";
}else{
echo "操作失败";
}
break;
/*批量==============================================================*/
}
?>
处理页面===================================================================================================================================