<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. JUnit——（二）注解

    1. 两种错误:Error和Failure Error是代码错误 @Test publicvoid testAdd() { int z=new T().add(5,3); assertEquals(8 ...

  2. SQL如何实现远程数据库链接

    利用sp_addlinkeserver 进行远程数据库连接可以把多个数据库的数据,放置到一个数据库中, 或者有设置操作权限的情况下,我们可以通过这种方式进行查询,备份数据等操作. 首先,我们要创建连接 ...

  3. 《Intel汇编第5版》 Mov指令

    一.Mov用于数据传送,用法如下: 二.当传送的数据和目标数据位宽不一致的时候,需要使用MOVZX.MOVSX扩展.MOVZX使用0填充高位,MOVSX使用源操作数最高位填充 下面是汇编代码演示: I ...

  4. Masonry 添加约束要注意顺序

    对一个视图添加约束,其依赖的约束必须先已经存在,不能依赖该代码后的约束,否则造成不可预料的结果,如下代码能达到预期效果 - (void)makeConstraints { __weak typeof( ...

  5. delphi变量作用域

    完全摘自网络(一件飘雪),供参考: 很多初学者对delphi单元的变量和函数访问权限不理解,在此我举例说明,希望初学者看此文后能茅塞顿开. delphi单元的变量和函数访问权限问题如下两个单元描述: ...

  6. CodeForces 546D

    Description 两个士兵在玩一个游戏,开始的时候第一个士兵选择一个数n,并把这个数交给第二个士兵,第二个士兵必须选择一个x满足x>1 且n能被x整除,然后将n变为n/x,然后把这个数交给 ...

  7. windows下寻找端口

    netstat -aon|findstr "5037" 找到占用5037的进程号: 根据进程号杀死进程 taskkill /pid 5136 /f tasklist|findstr ...

  8. LINQ to Entities does not recognize the method 'System.DateTime ToDateTime(System.String)' method

    System.Data.Objects.EntityFunctions和System.Data.Objects.SqlClient.SqlFunctions中的方法进行比较,如下 where Syst ...

  9. mongo数据库备份与恢复

    备份:mongodump -h xx --port 27017 -u user -p pass -d database -o D:\backup\database 恢复:mongorestore -h ...

  10. python操作----Memcached

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...