<!--主页--><!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></head><body> ???<button onclick="cha()">查询</button><input type="text" name="" id="cm" value="" /> ???<span><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加数据</button></span> ???????<table border="1" cellspacing="0" cellpadding="0" class="table table-striped"> ???</table> <!--=====================添加模态框 =========================--> ???<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"> ?????????????????<div class="form-group"> ?????????????????<label for="xh">序号:</label> ?????????????????<input type="text" class="form-control" id="xh"> ???????????????</div> ???????????????<div class="form-group"> ?????????????????<label for="chem">车名:</label> ?????????????????<input type="text" class="form-control" id="chem"> ???????????????</div> ???????????????<div class="form-group"> ?????????????????<label for="zh">组号:</label> ?????????????????<input type="text" class="form-control" id="zh"> ???????????????</div> ???????????????<div class="form-group"> ???????????????????<label for="sj">时间:</label> ???????????????????<input type="text" class="form-control" id="sj"> ???????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="email">油耗:</label> ?????????????????????<input type="text" class="form-control" id="yh"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="dl">动力：</label> ?????????????????????<input type="text" class="form-control" id="dl"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="pl">排量：</label> ?????????????????????<input type="text" class="form-control" id="pl"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="jg">价格：</label> ?????????????????????<input type="text" class="form-control" id="jg"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="pic">pic:</label> ?????????????????????<input type="text" class="form-control" id="pic"> ???????????????????</div> ?????????????</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="mymodify"> ?????<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"> ?????????????????<div class="form-group"> ?????????????????<label for="xh">序号:</label> ?????????????????<input type="text" class="form-control" id="xh1"> ???????????????</div> ???????????????<div class="form-group"> ?????????????????<label for="chem">车名:</label> ?????????????????<input type="text" class="form-control" id="chem1"> ???????????????</div> ???????????????<div class="form-group"> ?????????????????<label for="zh">组号:</label> ?????????????????<input type="text" class="form-control" id="zh1"> ???????????????</div> ???????????????<div class="form-group"> ???????????????????<label for="sj">时间:</label> ???????????????????<input type="text" class="form-control" id="sj1"> ???????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="email">油耗:</label> ?????????????????????<input type="text" class="form-control" id="yh1"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="dl">动力：</label> ?????????????????????<input type="text" class="form-control" id="dl1"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="pl">排量：</label> ?????????????????????<input type="text" class="form-control" id="pl1"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="jg">价格：</label> ?????????????????????<input type="text" class="form-control" id="jg1"> ???????????????????</div> ???????????????<div class="form-group"> ?????????????????????<label for="pic">pic:</label> ?????????????????????<input type="text" class="form-control" id="pic1"> ???????????????????</div> ?????????????</div> ?????????<!-- 模态框底部 --> ?????????<div class="modal-footer"> ???????????<button type="button" class="btn btn-secondary" data-dismiss="modal"onclick="xiugai()">提交</button> ?????????</div> ????????????</div> ?????</div> ???</div> ???<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="plshanchu()">批量删除</button></body></html><script type="text/javascript"> ???var colorattr = ["table-primary","table-success","table-danger","table-info","table-warning","table-active","table-secondary","table-warning","table-primary","table-danger","table-success","table-secondary","table-active","table-secondary","table-warning","table-secondary","table-primary","table-success","table-danger","table-info"]; ???var tab = document.getElementsByTagName("table")[0]; ???loadData(‘‘); ???????function cha(){ ????????var cm = document.getElementById("cm").value; ????????loadData(cm); ????????????} ???function loadData(cm){ ???????$.ajax({ ????????????type:"post", ????????????url:"carcl.php", ????????????async:true, ????????????data:{ ????????????????"type":"chazhao", ????????????????"cm" : cm ????????????}, ????????????dataType:"json",//返回数据类型 ????????????success: function(data){ ????????????????????var str =""; ???????????????????str +="<tr><td><input type=‘checkbox‘ onclick=‘quan(this)‘>全选</td><td>序号</td><td>车名</td><td>组号</td><td>时间</td><td>油耗</td><td>动力</td><td>排量</td><td>价格</td><td>pic</td><td>修改</td><td>删除</td></tr>"; ???????????????????for(var i=0 ;i<data.length; i++){ ???????????????????????str +="<tr class="+colorattr[i]+">"; ???????????????????????str +="<td><input type=‘checkbox‘ class=‘quanin‘ value=‘"+data[i][0]+"‘ /></td>" ???????????????????????for(var j=0;j<data[i].length;j++){ ???????????????????????????????str +="<td>"+data[i][j]+"</td>"; ????????????????????????} ???????????????????????str +="<td><button class=‘btn btn-primary‘ data-toggle=‘modal‘ data-target=‘#mymodify‘ onclick =‘add_modify(\""+data[i]+"\")‘>修改</button></td>"; ???????????????????????str +="<td><button onclick=‘shanchu(\""+data[i][0]+"\")‘>删除</button></td>"; ???????????????????????str +="</tr>"; ???????????????????} ???????????????????tab.innerHTML = str; ????????????} ????????}); ???} ???function add() { ???????var xh = document.getElementById("xh").value; ???????var chem = document.getElementById("chem").value; ???????var zh = document.getElementById("zh").value; ???????var sj = document.getElementById("sj").value; ???????var yh = document.getElementById("yh").value; ???????var dl = document.getElementById("dl").value; ???????var pl = document.getElementById("pl").value; ???????var jg = document.getElementById("jg").value; ???????var pic = document.getElementById("pic").value; ???????$.ajax({ ???????????type:"post", ???????????url:"carcl.php", ???????????async:true, ???????????data:{ ???????????????"type":"tianjia", ???????????????"xh" :xh, ???????????????"chem":chem, ???????????????"zh":zh, ???????????????"sj":sj, ???????????????"yh":yh, ???????????????"dl":dl, ???????????????"pl":pl, ???????????????"jg":jg, ???????????????"pic":pic ???????????}, ???????????dataType:"text",//返回数据类型 ???????????success:function(data){ ???????????????if(data.trim() == "ok"){ ???????????????????alert("添加成功"); ???????????????????loadData(‘‘); ???????????????} ???????????????????????????} ???????}); ???} ?????function add_modify(at) { ???????var attr = at.split(","); ???????var moren = ["xh1","chem1","zh1","sj1","yh1","dl1","pl1","jg1","pic1"]; ???????for (var i=0;i<attr.length;i++) { ???????????document.getElementById(moren[i]).value = attr[i]; ???????} ???????????} ???function xiugai() { ???????var xh1 = document.getElementById("xh1").value; ???????var chem1 = document.getElementById("chem1").value; ???????var zh1 = document.getElementById("zh1").value; ???????var sj1 = document.getElementById("sj1").value; ???????var yh1 = document.getElementById("yh1").value; ???????var dl1 = document.getElementById("dl1").value; ???????var pl1 = document.getElementById("pl1").value; ???????var jg1 = document.getElementById("jg1").value; ???????var pic1 = document.getElementById("pic1").value; ???????$.ajax({ ???????????type:"post", ???????????url:"carcl.php", ???????????async:true, ???????????data:{ ???????????????"type":"xiugai", ???????????????"xh1" :xh1, ???????????????"chem1":chem1, ???????????????"zh1":zh1, ???????????????"sj1":sj1, ???????????????"yh1":yh1, ???????????????"dl1":dl1, ???????????????"pl1":pl1, ???????????????"jg1":jg1, ???????????????"pic1":pic1 ???????????}, ???????????dataType:"text", ???????????success:function(data){ ???????????????if(data.trim() == "ok"){ ???????????????????alert("修改成功!"); ???????????????????loadData(‘‘); ???????????????} ???????????} ???????}); ???} ???function shanchu(hao){ ???????$.ajax({ ???????????type:"post", ???????????url:"carcl.php", ???????????async:true, ???????????data:{ ???????????????"type":"shanchu", ????????????????"hao": hao ???????????}, ???????????dataType:"text", ???????????success:function(data){ ???????????????if(data.trim() == "ok"){ ???????????????????alert("删除成功!"); ???????????????????loadData(‘‘); ???????????????} ???????????} ???????}); ???} ???function quan(t){ ???????var quanin = document.getElementsByClassName("quanin"); ???????for(var i=0;i<quanin.length;i++){ ???????????if(t.checked){ ???????????????quanin[i].checked=true; ???????????}else{ ???????????????quanin[i].checked=false; ???????????} ???????} ???} ???????function plshanchu(){ ?????var quanin = document.getElementsByClassName("quanin"); ?????var str =""; ?????var bs = 0; ?????for (var i=0;i<quanin.length;i++) { ?????????if(quanin[i].checked){ ?????????????bs++; ?????????????str +=quanin[i].value+"‘,‘"; ?????????????} ???????????} ???????if(bs==0){ ???????????alert("请至少选择一项") ???????}else{ ??????????str=str.substr(0,str.length-3); ?????????????????????$.ajax({ ???????????type:"post", ???????????url:"carcl.php", ???????????async:true, ???????????data:{ ???????????????"type":"plshanchu", ???????????????"str":str ???????????}, ???????????dataType:"text", ???????????success:function (data) { ???????????????if(data.trim() == "ok"){ ???????????????????alert("批量删除成功!"); ???????????????????loadData(‘‘); ???????????????} ???????????} ???????}); ???????????????????????????} ???????}</script><?php ??$type = $_POST[‘type‘]; ??$conn = new mysqli("localhost","root","","ceshi"); ??$conn->connect_error?die("链接失败"):""; ??switch($type){ ??case "chazhao": ?????????$cm = $_POST[‘cm‘]; ?????????$sql = "select * from car where name like ‘%{$cm}%‘"; ????????????$result = $conn->query($sql); ????????????$attr = $result->fetch_all(); ????????????echo json_encode($attr); ???break; ???case "tianjia": ????????$xh = $_POST[‘xh‘]; ????????$chem = $_POST[‘chem‘]; ????????$zh = $_POST[‘zh‘]; ????????$sj = $_POST[‘sj‘]; ????????$yh = $_POST[‘yh‘]; ????????$dl = $_POST[‘dl‘]; ????????$pl = $_POST[‘pl‘]; ????????$jg = $_POST[‘jg‘]; ????????$pic = $_POST[‘pic‘]; ????????$sql = "insert into car values(‘{$xh}‘,‘{$chem}‘,‘{$zh}‘,‘{$sj}‘,‘{$yh}‘,‘{$dl}‘,‘{$pl}‘,‘{$jg}‘,‘{$pic}‘)"; ????????if($result = $conn->query($sql)){ ????????????echo "ok"; ????????} ????????break; ???case "xiugai": ????????$xh1 = $_POST[‘xh1‘]; ????????$chem1 = $_POST[‘chem1‘]; ????????$zh1 = $_POST[‘zh1‘]; ????????$sj1 = $_POST[‘sj1‘]; ????????$yh1 = $_POST[‘yh1‘]; ????????$dl1 = $_POST[‘dl1‘]; ????????$pl1 = $_POST[‘pl1‘]; ????????$jg1 = $_POST[‘jg1‘]; ????????$pic1 = $_POST[‘pic1‘]; ????????$sql = "update car set Name=‘{$chem1}‘,Brand=‘{$zh1}‘,Time=‘{$sj1}‘,Oil=‘{$yh1}‘,Powers=‘{$dl1}‘,Exhaust=‘{$pl1}‘,Price=‘{$jg1}‘,Pic=‘{$pic1}‘ where Code=‘{$xh1}‘"; ????????if($result = $conn->query($sql)){ ????????????echo "ok"; ????????} ????????break; ????case "shanchu": ????????$hao = $_POST[‘hao‘]; ????????$sql = "delete from car where code=‘{$hao}‘"; ?????????if($result = $conn->query($sql)){ ????????????echo "ok"; ?????????????????????} ????????break; ???case "plshanchu": ????????$str = $_POST[‘str‘]; ????????$sql = "delete from car where code in (‘{$str}‘)"; ?????????if($result = $conn->query($sql)){ ????????????echo "ok"; ???????????????} ?????????break; ?????????} ????>6.16 ajax写car表
原文地址：https://www.cnblogs.com/sunhao1987/p/9190242.html