AJAX 创建表格

Posted kevin2016

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX 创建表格相关的知识，希望对你有一定的参考价值。

<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 创建表格的主要内容，如果未能解决你的问题，请参考以下文章

Ajax 片段元标记 - Googlebot 未读取页面内容

jQuery ajax 动态append创建表格出现不兼容ie8

AJAX相关JS代码片段和部分浏览器模型

AJAX 创建表格

雷林鹏分享：Apache POI电子表格/Spreadsheet

雷林鹏分享：Apache POI电子表格/Spreadsheet