效果图：

建表：company

DROP TABLE IF EXISTS `company`;
CREATE TABLE `company` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`company_name` varchar(255) DEFAULT NULL,
`lxr` varchar(255) DEFAULT NULL,
`tel` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`user` varchar(255) DEFAULT NULL,
`pwd` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=gbk;

展示页面：show.php
代码：

<?php
// 连接数据库
$conn = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
// 设置编码方式：sql语句
$result = mysqli_query($conn, "set names utf8");
$sql = "select * from company";
// 查询结果集
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
?>
<html>
<meta charset="utf-8">
<title>ajax即点即改</title>
<body>
<h1>人员信息</h1>
<table border="1px solid">
<tr>
　　<th></th>
　　<th>id</th>
　　<th>用户名</th>
　　<th>联系人</th>
　　<th>手机号</th>
　　<th>邮箱</th>
　　<th>单位名称</th>
　　<th>操作</th>
</tr>
<?php foreach ($data as $k => $v) {?>
<tr id="st_<?php echo $v['id'] ?>">
　　<td>
　　　　<input type="checkbox" name="usercheck" value="<?php echo $v['id'] ?>">
　　</td>
　　<td><?php echo $v['id'] ?></td>
　　<td><?php echo $v['user'] ?></td>
　　<td><?php echo $v['lxr'] ?></td>
　　<td><?php echo $v['tel'] ?></td>
　　<td><?php echo $v['email'] ?></td>
　　<td>
　　　　<span id="dian_<?php echo $v['id'] ?>" onclick="changeme(<?php echo $v['id'] ?>)">
　　　　　　<?php echo $v['company_name'] ?>
　　　　</span>
　　　　<input type="hidden" id="input_<?php echo $v['id'] ?>" onblur="doit(<?php echo $v['id'] ?>)">
　　</td>
　　<td onclick="del(<?php echo $v['id'] ?>)">删除</td>
</tr>
<?php }?>
</table>
<input type="checkbox" id="checkall" onclick="ckAll()">全选/全不选
<button onclick="delall()">批量删除</button>
</html>
<script>
//全选
function ckAll(){
// 获取全选按钮的状态，让上面的按钮的选中状态和它的状态相同，
　　var flag=document.getElementById("checkall").checked;
　　var cks=document.getElementsByName("usercheck");
　　for(var i=0;i<cks.length;i++){
　　　　cks[i].checked=flag;
　　}
}
function del(id){
// 实例化ajax对象
　　var xhr=new XMLHttpRequest();
// 打开一个请求
　　xhr.open("get","do_delete.php?id="+id);
// 发送请求
　　xhr.send();
// 监听状态是否变化,状态改变事件
　　xhr.onreadystatechange=function(){
// 请求成功。以及响应结束
　　　　if(xhr.status==200&&xhr.readyState==4){
　　　　　　if(xhr.responseText=='删除成功'){
　　　　　　　　alert('删除成功')
　　　　　　　　document.getElementById("st_"+id).innerHTML=""
　　　　　　};
　　　　}
　　}
}

// 即点即改
function changeme(id){
// 获取span节点
　　var span_node = document.getElementById('dian_'+id)
// 获取input节点
　　var input_node = document.getElementById('input_'+id)
// 1、点击让span 隐藏，让input 显示出来
　　span_node.style.display="none" // 一定是双引号，span标签隐藏
　　input_node.type="text"
}

function doit(id){
// 获取span节点
　　var span_node = document.getElementById('dian_'+id)
// 获取input节点
　　var input_node = document.getElementById('input_'+id)
// 获取input节点中的 value值
　　var input_value = input_node.value
// 如果输入值非空，input框隐藏，值显示在span标签中
　　if (input_value) {
　　　　span_node.style.display="block"
　　　　input_node.type="hidden" //input框隐藏
// ajax发送请求，更改数据库
　　　　var xhr = new XMLHttpRequest();
　　　　xhr.open('get','update.php?cname='+input_value+'&id='+id)
　　　　xhr.send()
　　　　xhr.onreadystatechange=function(){
　　　　　　if (xhr.readyState==4&&xhr.status==200) {
// 值显示在span标签中
　　　　　　　　span_node.innerHTML=input_value
　　　　　　}
　　　　}
　　}
}
// 批量删除
function delall() {
　　var usercheck = document.getElementsByName("usercheck");
// 获取总共有多少个checkbox
　　var len = usercheck.length;
　　var flag = false;
　　var str="";

　　var arr=new Array();

　　for (var i = 0; i < len; i++) {
　　　　if (usercheck[i].checked) {
　　　　　　// console.log(usercheck[i].value)//拼接id　　　　

　　　　　　arr.push(usercheck[i].value

　　　　　　str=str+','+usercheck[i].value,

　　　　　　flag = true;
　　　　}
　　}
　　if (!flag) {
　　　　alert('至少选择一个');
　　　　return;
　　}
// 截取字符串，去除第一个逗号，
　　var id = str.substr(1);
// 实例化ajax对象
　　var xhr=new XMLHttpRequest();
// 打开一个请求
　　xhr.open("get","do_delete.php?id="+id);
// 发送请求
　　xhr.send();
// 监听状态是否变化
　　xhr.onreadystatechange=function(){
// 请求成功。以及响应结束
　　　　if(xhr.status==200&&xhr.readyState==4){

　　　　　　　　for (var i = 0; i < arr.length; i++) {
　　　　　　　　　　id = arr[i]
　　　　　　　　　　document.getElementById("st_"+id).innerHTML=""
　　　　　　　　}

　　　　}
　　}
 }
</script>

单删文件：do_delete.php
代码：

<?php
// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
// 接收参数id，要删除的额数据的id
$id = $_GET['id'];

$sql = "delete from company where id in ($id)";

// 执行删除

$st = mysqli_query($link, $sql);
if ($st) {
　　echo "删除成功";
} else {
　　echo "删除失败";
}

?>

//即点即改更新数据库,文件：update.php

<?php
// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
$id = $_GET['id'];
$cname = $_GET['cname'];
$sql = "update company set company_name='$cname' where id=$id";
$st = mysqli_query($link, $sql);
if ($st) {
　　echo "更改成功";
} else {
　　echo "更改失败";
}

?>

原生PHP+原生ajax批量删除（超简单），ajax删除，ajax即点即改,完整代码，完整实例的更多相关文章

  1. Android超简单气泡效果

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680最近有用到水下气泡上升效果,因此在网上查了一下资料,结果还真找到了 ...

  2. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  3. 用C#Winform写个简单的批量清空文件内容和删除文件的小工具

    用C#Winform写个简单的批量清空文件内容和删除文件的小工具 本文介绍这个简单得不能再简单的小项目.做这个项目,有以下目的. 1 当然是做个能用的工具 2 学习使用Github 关于用VS2013 ...

  4. ASP.NET中一种超简单的Ajax解决方案

    为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...

  5. ajax批量删除功能的实现源代码

    效果展示: 完整代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse ...

  6. 超简单！80行代码实现Google日历（拖放、移动、AJAX）

    介绍 本实例介绍使用DayPilot Lite for ASP.NET MVC library 类来实现类google日历效果. 在线实例 天视图  星期视图  拖放调整  拖放移动  行代码来实现a ...

  7. 使用jQuery通过点击它删除HTML表格行-超简单

    jQuery的已成为所有时刻的最常用和最喜爱的JavaScript框架之一.它不仅不会减少在JavaScript编码简单的技术开销,而且也使您的代码的跨浏览器兼容.我已经写了许多关于jQuery教程, ...

  8. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  9. 超简单使用批处理（batch）操作数据库

    超简单使用批处理(batch)操作数据库 批处理(batch)是什么 批处理的执行就好比快递员的工作: 未使用批处理的时候,快递员一次从分发点将一件快递发给客户: 使用批处理,则是快递员将所有要派送的 ...

随机推荐

  1. Qt Quick 多媒体 - 播放音乐和视频

    MediaPlayer 是 QML 提供的核心多媒体类,可以播放音频.视频.要使用 MediaPlayer,需要引入 QtMultimedia 模块,在 QML 文档的开始加入 "impor ...

  2. day05——字典

    day05 字典 字典-- dict: 字典无序的,可变的数据类型 用于存储大量数据,字典要比列表快,将数据和数据之间进行关联 lst1 = ['常鑫','李文虎','张宇'] # 姓名 lst2 = ...

  3. [NOI2019] 弹跳

    题意: 给你平面上的$n$个点,共有$m$个弹跳装置. 每个弹跳装置可以从点$p_{i}$以$t_{i}$的代价跳到矩形$(L_{i},D_{i}),(R_{i},U_{i})$中的任何一个点. 现在 ...

  4. MySQL各类型字段可定义最大宽度

    今天浏览mysql的官网文档,无意中看到如图划线部分一句话,引起了我的兴趣,所以决定做实验官方所言. 条例1.创建数据表时,所有字段定义时"宽度之和"不得超过65535字节: 条例 ...

  5. Golang 模块(Module)官方手册

    官方原文: https://github.com/golang/go/wiki/Modules Go 1.11包括此处建议的对版本模块的初步支持.模块是Go 1.11中的实验性加入功能,并计划纳入反馈 ...

  6. LinQ实现DataTable不定行转列 行列转换，有图

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LinqDemo2.aspx.c ...

  7. PAT 1022D进制的A+B

    PAT 1022D进制的A+B 输入两个非负 10 进制整数 A 和 B (≤2​30−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依次给出 3 个整数 A.B ...

  8. 实验吧——认真一点（绕过空格，逗号，关键字过滤等 sql盲注）

    题目地址:http://ctf5.shiyanbar.com/web/earnest/index.php 过滤和拦截了某些东西,我经过多次尝试,最终构造的是 1'=(ascii(mid((select ...

  9. javaEE复习重点个人总结

    最近在学院或集队的群里看见最多的就是求javaEE大作业了,那么突然有感而发,写点参考性的期末复习总结. 第一章JavaEE 概述: 1:两层体系应用体系结构 安全性低,部署困难,消耗系统资源 2 三 ...

  10. Js中replace替换所有*

    var t = '***感**谢**有**你***'; var r = t.replace(/\*/g,''); //\为转义字符 g表示全局 console.log(r) //感谢有你