<html>
<head>

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

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

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

<style type="text/css">

.sr

{

    background-color:#0F0;

    font-size:16px;

    color:#C66

}

.sr:hover

{

    background-color:#309

}

</style>

</head>

<body>

<input type="button" id="btn"  value="点击出现表格" style="width:100px"/>

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

</table>

</body>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(e) {

    Showall();

    binkck();

    });

    <!--删除函数-->

    function binkck()

    {

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

        var code = $(this).attr("bs");

        $.ajax({

            async:false,

            url:"delete.php",

            data:{code:code},

            type:"POST",

            dataType:"TEXT",

            success: function(data)

            {

                if(data.trim()=="OK")

                {

                    Showall();

                    binkck();

                }

                else

                {

                    alert("失败");

                }

            }

        })

        });

    }        

    <!--表格函数-->

    //思路：把所有的数据做成字符语句，最后放入 html（）输出

    function Showall()

    {

            $.ajax({

            async:false,

            url:"chuli2.php",

            dataType:"TEXT",        //必须大写 dataType

            success: function(data)

            {

                //把数据库的数据拼接，拿出来，然后拆分，最后组成字符语句，放入html()输出

                var str="<tr><td>code</td><td>2</td><td>3</td></tr>";
　　　　　　　　　　//不要把表头放入table 表格，因为后面的$("#xianshi").html() 会覆盖掉

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

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

                {

                    str=str+"<tr>";

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

                    for(var j=0;j<lie.length;j++)

                    {

                        str=str+"<td>"+lie[j]+"</td>";

                    }

                    str+="<td class='sr' bs='"+lie[0]+"'>删除</td></tr>";

                }

            $("#xianshi").html(str);    //输出

            }

        })

    }

});

</script>

</html>
 

chuli2.php

 
<?php

include("./Tp.class.php");

$db = new Tp();

$sql = "select * from nation";

$attr = $db->query($sql);

$r="";

foreach($attr as $v)

{

    $r=$r.implode("^",$v);    //数组内，字符拼接

    $r=$r."|";                //数组之间，用"|"拼接

}

$str=substr($r,0,strlen($r)-1);　　//取字符串

echo $str;

?>
 

delete.php

 
<?PHP

//接受数据

$code = $_POST["code"];

//加载类

include("./Tp.class.php");

$db=new Tp();

$sql="delete from nation where Code='{$code}'";

$result = $db->query($sql,1);

//不要进行 $attr = $result 操作，这是一次数据输出操作，会录入data

if($result)

{

    echo "OK";

}

else

{

    echo "NO";

}

AJAX 创建表格的更多相关文章

  1. AJAX创建表格，删除数据

    主页面 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8 ...

  2. Hive创建表格报【Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException】引发的血案

    在成功启动Hive之后感慨这次终于没有出现Bug了,满怀信心地打了长长的创建表格的命令,结果现实再一次给了我一棒,报了以下的错误Error, return code 1 from org.apache ...

  3. 示例-创建表格-指定行列&删除表格的行和列

    <body> <script type="text/javascript"> /* *上面的方法和你麻烦. *既然操作的是表格, *那么最方便的方式就是使用 ...

  4. 示例-创建表格&使用表格对象

    @charset "utf-8";/* CSS Document */table{ border:#249bdb 1px solid; width:500px; border-co ...

  5. JavaScript创建表格的两种方式

    方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...

  6. 如何利用Dreamwever快速创建表格？？？

    这样的一张表,用table写完感觉好累,很多单元格都不一样大,还要单独设置样式,今天还分享下用Dreamwever快速创建表格. 可能这会有人知道了!当然是插入表格了!

  7. [原创]Devexpress XtraReports 系列 2 创建表格报表

    昨天发表了Devexpress XtraReports系列开篇,今天我们继续. 今天的主题是创建表格报表. 首先我们来看看最后实现的效果.Demo最后附上. 接下来开始讲解如何一步一步做出这个报表: ...

  8. 使用JS创建表格以及隔行换色（包括隔N行换色）

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  9. 今天学习了无序列表和有序列表和使用HTML5创建表格

    ol建立有序列表,该列表可以用设置type="A/a" 其语法架构为 <ol> <li></li> <li></li> ...

随机推荐

  1. Python基础知识学习_Day3

    一.字典用法 字典是一种key-value数据类型,通过key获取具体value的内容,字典的特性是无序.去重. 增删改查用法如下: 1.1基本增删改查操作 name = {"," ...

  2. CUDA编程入门，Dim3变量

    dim3是NVIDIA的CUDA编程中一种自定义的整型向量类型,基于用于指定维度的uint3. 例如:dim3 grid(num1,num2,num3): dim3类型最终设置的是一个三维向量,三维参 ...

  3. WinForm 进程和线程

    进程: //进程用到的类Process,需要进行解析 using System.Diagnostics Process.Start("calc");//Process是非静态方法, ...

  4. codefirst mvc Self referencing loop detected for property

    登录时,json序列化用户类时提示错误"Self referencing loop detected for property--",经过5个小时的查找,发现原因可能是,用户类包含 ...

  5. iOS 打包上传AppStore相关(3)-iTunes相应配置以及使用蒲公英网站进行应用托管分发(链接/二维码)

    上一篇讲到我们最终生成了一个格式为 .xcarchive 的文件(可以右键并Show in Finder)查看.本篇我们就进行最后的设置,打包上传.另外,还有一个小福利,那就是打测试包分发链接测试. ...

  6. git clone出现SSL错误

    在学习git的时候,发现不能使用git clone从github.com下载,报了个ssl错误. Cloning into cancan... error: SSL certificate probl ...

  7. spring No adapter for handler 错误

    为了实现controller对JSON数据的自动解析,在spring-mvc.xml文件中增加了 <bean class="org.springframework.web.servle ...

  8. Dubbo Zookeeper

    发布 Service:每个<dubbo:service/>在spring内部都会生成一个ServiceBean实例,ServiceBean的实例化过程中调用export方法来暴露服务 co ...

  9. try{}catch{}finally{}的手记

    try{ System.out.println("执行try"); int = 6 / 0; return 1; }catch(Exception e){ System.out.p ...

  10. vim全局替换命令

    vim全局替换命令   语法为 :[addr]s/源字符串/目的字符串/[option]全局替换命令为::%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行.如:“1,20” ...