• AJAX创建表格,删除数据


    主页面

    <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="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";
    }
  • 相关阅读:
    集合的整体
    StringBuffer类中的东西
    ChickHouse安装介绍
    Flink集群搭建
    hadoop-MapReduce总结
    hadoop-hdfs
    linux命令总结
    linux
    shall 2-13
    String 类的其他功能
  • 原文地址:https://www.cnblogs.com/wanlibingfeng/p/5503266.html
Copyright © 2020-2023  润新知