Ajax "Show popup Details" and "delete" function exercises

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.