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";
}
时间: 2024-10-10 08:43:09

AJAX 创建表格的相关文章

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

很多情况下,通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是很方便的 但是不同的浏览器针对动态生成的不是很兼容,在此遇见的不兼容ie8,跟各位分享下 代码: json数据 data.json [{"name":"ajax","job":"manong"},{"name":"js","job":"diaosi"}] html

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

在成功启动Hive之后感慨这次终于没有出现Bug了,满怀信心地打了长长的创建表格的命令,结果现实再一次给了我一棒,报了以下的错误Error, return code 1 from org.apache.Hadoop.hive.ql.exec.DDLTask. MetaException,看了一下错误之后,先是楞了一下,接着我就发出感慨,自从踏上编程这条不归路之后,就没有一天不是在找Bug的路上就是在处理Bug,给自己贴了个标签:找Bug就跟吃饭一样的男人.抒发心中的感慨之后,该干活还是的干活.

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

<body> <script type="text/javascript"> /* *上面的方法和你麻烦.*既然操作的是表格,*那么最方便的方式就是使用表格节点对象的方法.* *表格是由行组成.表格节点对象中insertRow方法就完成了创建行并添加的动作.* *行是有单元格组成.通过tr节点对象的insertCell来完成.*/function crtTable(){ var oTabNode = document.createElement("ta

JavaScript之表格操作(二)创建表格病填充表格数据

//创建表格 var tableOptions = { way: "insertBefore", //insertBefore,append positionId: "domTest", //定位元素节点的ID tableId: "my-table", rows: 2, cols: 8, data: [ ['四川', '宁夏', '西藏', '北京', '上海', '台湾', '福建', '河北'], ['陕西', '天津', '山东', '江苏

创建表格的几个元素

2.创建表格的几个元素是:table,tbody,tr,th,td.2.1.整个表格以<table>开始,以</table>结束:2.2.如果表格中加入<tbody>就会等表格内容全部下载完毕之后才显示:2.3.<tr>代表表格的行,有几个就有几行:2.4.<td>代表单元格:2.5.<th>表格头部的单元格,即表格表头,其中的文本默认为粗体显示且居中:2.6.<table>中的元素在没有添加css样式之前,在网页中显示的

iOS之创建表格类视图WBDataGridView

项目中创建表格, 引用头文件 #import "WBDataGridView.h" - (void)viewDidLoad{ [superviewDidLoad]; // Do any additional setup after loading the view. self.view.backgroundColor = [UIColorwhiteColor]; CGFloat margin = 10.f; CGFloat width = self.view.frame.size.wi

javascript动态创建表格:新增、删除行和列

转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加

FineUIMvc随笔 - 动态创建表格列

声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC 中,如果还想着 WebForms 的那一套,想着怎么才能在 Controller 中访问 View 中的表格控件,这是行不通的. 我曾写过一个系列文章<ASP.NET MVC快速入门(MVC5+EF6)>,开篇就讲到了 MVC 中的页面的生成流程: 这个页面之所以能够呈现在我们眼前,经历了三个主

javascript如何实现动态创建表格和增加表格的行

javascript如何实现动态创建表格和增加表格的行:在实际应用中,表格的行数不一定都是符合实际要求的,可能需要动态的增加表格的行数,下面就是一段实现此功能的代码实例,并且还实现了隔行变色功能.有需要的朋友可以自行分析一下代码,非常的简单,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </