1.数据库找一张表：
颜色表
2.主页面
主页面的代码用到tbody；
TBODY作用是：
可以控制表格分行下载，从而提高下载速度。
（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。 
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
 BODY是HTML的文本体，一个HTML文件，只有一个BODY，而在TABLE中可以有多个TBODY。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上和，
比如：
 以下为引用的内容：head1head2首先显示首先显示再显示再显示foot1foot2
 注意： 
*1.TBODY元素在浏览器中不会被渲染表示 
*2.当不同行间的单元间合并时各单元格所在的行不要加TBODY标签 
提示：TBODY元素内包含的有效标签有：TD、TH、TR 特别提示 本例代码的运行将看不到效果，因为表格中的内容比较少，
只有在数据量大而且表格嵌套较多时才看得到效果。

主页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<h1>显示数据</h1>

<table width="100%" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td>代号</td>

        <td>名称</td>

        <td>操作</td>

    </tr>

    <tbody id="td">

    </tbody>

</table>

</body>

</html>

<script>

    $.ajax({

        url:"jiazai.php",

//        显示所有的数据不用写data

    dataType:"TEXT",

        success:function(data)

        {

        }

    });

</script>


图：


回调函数里面是空的，等会回来写；
接着是加载页面：
显示：遍历数组，显示出表的内容，具体：




<?php

include ("db.class.php");

$db = new db();

$sql = "select * from min";

$arr = $db->Query($sql);

//遍历

$str="";

foreach ($arr as $v)

{

    $str = $str.implode("-",$v)."|";

    //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|

}

echo $str;





来看一下输出的是什么：


在最后面多了一条竖线，去竖线：




$str = substr($str,0,strlen($str)-1);

//截取字符串：从第0个开始，截取它的长度-1

//strlen获取字符串长度




再来看：


现在来写回调函数：




<script>

    $.ajax({

        url:"jiazai.php",

//        显示所有的数据不用写data

    dataType:"TEXT",

        success:function(data)

        {

            var str = "";

           var hang = data.split("|");

           //split拆分字符串

            for(var i = 0;i<hang.length;i++)

            {

                //通过循环取到每一行;拆分出列；

                var lie = hang[i].split("-");

               str = str+

                   "<tr><td>"

                   +lie[0]+

                   "</td><td>"

                   +lie[1]+

                   "</td><td>操作</td></tr>";

            }

            $("#td").html(str);

            //找到td把html代码扔进去

        }

    });

</script>






写完看下页面：


3.接下来就可以写删除了：

先在在最后的一个单元格中添加删除按钮，并传一个主键值：




"</td><td>" +

                   "<input type='button' ids='"+lie[0]+"' class='sc'  value='删除' />" +

                   //ids里面存上主键值

                   "</td></tr>";






 给删除按钮添加事件，并调用Ajax方法：
**


异步与同步的区别：

同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果




同步是在一条直线上的队列，异步不在一个队列上 各走各的

**




 //给删除按钮加上事件

            $(".sc").click(function(){

                var ids = $(this).attr("ids");

                $.ajax({

                   url:"shanchu.php",

                    data:{ids:ids},

                    dataType:"TEXT",

                    type:"POST",

                    success:function (d) {

                    }

                });

            })






回调函数等等回来写；


继续删除处理页面：




<?php

include ("db.class.php");

$db = new db();

$ids = $_POST["ids"];

$sql = "delete from min WHERE ids='{$ids}'";

if($db ->Query($sql,0))

{

    echo "ok";

}

else{

    echo "no";

}




这样来看：


点击删除，删掉以后不刷新页面，

若是让他自动加载数据，需要把加载数据的代码封装成一个方法，删除的时候调用此方法；就哦可了
主页面代码：






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<h1>显示数据</h1>

<table width="100%" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td>代号</td>

        <td>名称</td>

        <td>操作</td>

    </tr>

    <tbody id="td">

    </tbody>

</table>

</body>

</html>

<script>

    //调用load方法

    load();

    //把加载数据封装成一个方法

    function load()

    {

        $.ajax({

            url: "jiazai.php",

//        显示所有的数据不用写data

            dataType: "TEXT",

            success: function (data) {

                var str = "";

                var hang = data.split("|");

                //split拆分字符串

                for (var i = 0; i < hang.length; i++) {

                    //通过循环取到每一行;拆分出列；

                    var lie = hang[i].split("-");

                    str = str +

                        "<tr><td>"

                        + lie[0] +

                        "</td><td>"

                        + lie[1] +

                        "</td><td>" +

                        "<input type='button' ids='" + lie[0] + "' class='sc'  value='删除' />" +

                        //ids里面存上主键值

                        "</td></tr>";

                }

                $("#td").html(str);

                //找到td把html代码扔进去

                //给删除按钮加上事件

                $(".sc").click(function () {

                    var ids = $(this).attr("ids");

                    $.ajax({

                        url: "shanchu.php",

                        data: {ids: ids},

                        dataType: "TEXT",

                        type: "POST",

                        success: function (d) {

                            if (d.trim() == "ok") {

                                alert("删除成功");

                                //调用加载数据的方法

                                load();

                            }

                            else {

                                alert("删除失败");

                            }

                        }

                    });

                })

            }

        });

    }

</script>








删除页面代码：






<?php

include ("db.class.php");

$db = new db();

$ids = $_POST["ids"];

$sql = "delete from min WHERE ids='{$ids}'";

if($db ->Query($sql,0))

{

    echo "ok";

}

else{

    echo "no";

}






												


											
Ajax对数据的删除与查看的更多相关文章
	

    
						
  1. 用ajax对数据进行删除和查看
		
    删除和查看详情操作的共同语句:就是怎么显示表? 1.在主体中写表的开头行,想要显示的内容,并且加载数据也要显示的地方也建张表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 & ...
    
		
    2. 
								
  2. Ajax请求数据与删除数据后刷新页面
		
    1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)"  ...
    
		
    3. 
						
  3. Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
		
    目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...
    
		
    4. 
						
  4. MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
		
    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html 系列教程:MVC5 + EF6 + Boo ...
    
		
    5. 
						
  5. ajax 实现加载页面、删除、查看详细信息，以及bootstrap网页的美化
		
      由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些, 今天我用bootstrap把之前做的显示表格进行了一下美 ...
    
		
    6. 
						
  6. form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例
		
    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...
    
		
    7. 
						
  7. ajax Post数据，并得到返回结果，密码加密（Select，checkbox）
		
    使用ajax Post数据到后台Server,并从后台返回数据给前端WEB: urls.py: from django.conf.urls import url from aptest import  ...
    
		
    8. 
						
  8. 爬虫进阶之Selenium和chromedriver,动态网页（Ajax）数据抓取
		
    什么是Ajax: Ajax(Asynchronouse JavaScript And XML)异步JavaScript和XML.过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意 ...
    
		
    9. 
						
  9. ajax结合sweetalert实现删除按钮动态效果
		
    目录 一.ajax结合sweetalert实现删除按钮动态效果 二.bulk_create批量插入数据 1. 一条一条插入 2. 批量插入 三.自定义分页器 一.ajax结合sweetalert实现删 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [Web 前端] 019 css 定位之绝对定位与相对定位
			
    1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...
    
			
    2. 
						
  2. kafka+hbase+hive实现实时接入数据至hive
			
    整体架构: 项目目标,实现配置mysql,便可以自动化入湖至Hive,入湖至Hive方便后期数据分析. 首先在Mysql中配置好kafka的topic.Server以及入户表等信息,java程序初始化 ...
    
			
    3. 
						
  3. vue-cli-webpake搭建和配置
			
    确认创建项目后,后续还需输入一下项目名称.项目描述.作者.打包方式.是否使用ESLint规范代码等等,详见上图.安装顺利执行后会,生成如下文件目录:1.全局化安装cnpm npm install cn ...
    
			
    4. 
						
  4. 树——populating-next-right-pointers-in-each-node（填充每个节点的next指针）
			
    问题: Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode  ...
    
			
    5. 
						
  5. tree 数状型结构显示目录下的内容
			
    1. 命令功能 tree中文意思“树”,以树形结构显示目录内容.. 2. 语法格式 tree  [option]   [directory] tree  选项   目录 3. 使用范例 当最小化安装l ...
    
			
    6. 
						
  6. bzoj 3569 DZY Loves Chinese II 随机算法 树上倍增
			
    题意:给你一个n个点m条边的图,有若干组询问,每次询问会选择图中的一些边删除,删除之后问此图是否联通?询问之间相互独立.此题强制在线. 思路:首先对于这张图随便求一颗生成树,对于每一条非树边,随机一个 ...
    
			
    7. 
						
  7. 2018-09-10-weekly
			
    Algorithm 删除链表的倒数第N个节点 What:给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. How:这是一道典型的利用双指针法解题.首先让指针first指向头节点,然后 ...
    
			
    8. 
						
  8. AJAX——理解XMLHttpRequest对象
			
    AJAX大家已经都知道了,XMLHttpRequest对象则是AJAX的核心.这篇博客重点总结一下这个对象的使用. XMLHttpRequest对象的属性和方法: 属性 说明 readyState 表 ...
    
			
    9. 
						
  9. AGC036C GP 2
			
    由于近期集训做的一直都是校内题 然后好久都怎么写题了( 发篇博客证明我还活着 (其实也没人关心 好像并不是很难的一道计数 就是脑子总是缺一块导致会做不出来( 首先我们可以分析性质 1.$\sum A_ ...
    
			
    10. 
						
  10. 解决Debug JDK source 无法查看局部变量的问题方案
			
    一.问题阐述首先我们要明白JDK source为什么在debug的时候无法观察局部变量,因为在jdk中,sun对rt.jar中的类编译时,去除了调试信息,这样在eclipse中就不能看到局部变量的值. ...
    
			
    11.