1. View details, displayed as pop-up windows, using AJAX
2. Bulk Delete
The "query" function can refer to the previous article, which only explains the Ajax "show Popup Details" and "delete" function
First: The code in the body
<title>ajax Automotive Web Query </title><script src= "jquery-2.0.0.min.js" ></script><script type= " Text/javascript "src=" tanchuang.js "></script><link href=" Tanchuang.css "rel=" stylesheet "type=" text/ CSS "/><style type=" Text/css ">.xq{width:90px;height:20px;color: #000; text-align:center;line-height:20px; Vertical-align:middle;}. Xq:hover{cursor:pointer;background-color: #0FF; color: #F00;} </style>
Second: Because Ajax is used, most of the code is in JScript, the real page function Xianshi ()
$ (document). Ready (function (e) {Xianshi ();//page display function Xianshi () {$.ajax ({async:false,url: "chuli.php", Data:{type : 0},type: "POST", DataType: "TEXT", success:function (data) {var hang=data.split ("|"); var str= "<tr><td> code </td><td> name </td><td> action </td></tr>"; for (Var i=0 ; i
Third: View details add pop-up window
Add Popup $ (". Xq") to view details. Click (function () {var code=$ (this). attr ("BS"); $.ajax ({async:false,url: "chuli.php", Data:{code : Code,type:1},type: "POST", DataType: "TEXT", success:function (data) {var lie=data.split ("^"); var html= "<div> Name: "+lie[1]+" </div><div> Production Time: "+lie[3]+" </div><div> Fuel consumption: "+lie[4]+" </div><div> Power: "+lie[5]+" </div><div> Emissions: "+lie[6]+" </div><div> Price: "+lie[7]+" </div> "var wd=new Window ({width:600,height:400,title: ' car Details ', content:html,ismask:true,buttons: ", Isdrag:true,});});
Four: Select All function
Select All $ ("#all"). Click (function () {var jd=$ (this) [0].checked;var jc=$ (". M"); Jc.prop ("Checked", JD);});
Five: Bulk Delete function
Bulk Delete $ ("#del"). Click (function () {var jc=$ (". M"), var str= "", and for (Var i=0;i<jc.length;i++) {if (Jc.eq (i). Prop (" Checked ")) {Str+=jc.eq (i). Val () +" | ";}} str = STR.SUBSTR (0,str.length-1); $.ajax ({async:false,url: "chuli.php", Data:{str:str,type:2},type: "POST", DataType: "TEXT", success:function (data) {alert (data); Xianshi ();},});});
Sixth: chuli.php page called in Ajax
<?phpinclude ("DBDA.class.php"); $db =new Dbda (); $type =$_post["type"];switch ($type) {case 0: $sql = "SELECT * FROM Car" ; Echo $db->strquery ($sql); Break;case 1: $code = $_post["code"]; $sql = "SELECT * from car where code = ' {$code} '"; Echo $d B->strquery ($sql); Break;case 2: $str = $_post["str"]; $attr = Explode ("|", $str); $tj = Implode ($attr, "', '"); $sql = " Delete from car where Code in (' {$TJ} ') "if ($db->query ($sql, 1)) {echo" deleted successfully!) ";} Else{echo "Delete failed! ";} Break;default:echo "";}
Ajax "Show popup Details" and "delete" function exercises