<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. php注册数模式

    在前两篇单例模式和工厂模式后,终于迎来了最后一个基础的设计模式--注册树模式. 什么是注册树模式? 注册树模式当然也叫注册模式,注册器模式.之所以我在这里矫情一下它的名称,是因为我感觉注册树这个名称更 ...

  2. dplyr 数据操作 常用函数(4)

    接下来我们继续了解一些dplyr中的常用函数. 1.ranking 以下各个函数可以实现对数据进行不同的排序 row_number(x) ntile(x, n) min_rank(x) dense_r ...

  3. 项目有叉号, 但是没有代码错误的时候, 是JDK版本的问题

    windows---proferences---java--compiler进入项目--properties---java Compiler进入项目--properties---Myeclipse-- ...

  4. 一个初学者的辛酸路程-socket编程-8

    前言: 你会发现会网络是多么幸福的事情 主要内容: socket 概念: socket本质上就是2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递.我们知道网络通信都是基于 ...

  5. 如何取消input记忆功能

    默认情况下,input会有这个记忆功能,如果不想让它记忆,可以在input上加上autocomplete="off"即可.

  6. Python 修炼3

    # 列表 功能方法 *补充(zip zip(list1,list2) 会形成一个[(),()]新的列表list1和list2一一对应得组成一个新的元素以元组最为单位) # 1.修改# li = [1, ...

  7. hibernate异常:org.hibernate.NonUniqueObjectException

    异常:org.hibernate.NonUniqueObjectException 提示:a different object with the same identifier value was a ...

  8. centos7下安装JDK 1.7

    选则64位的rpm包下载:jdk-7u25-linux-x64.rpmrpm –ivh 'jdk安装包路径' 环境变量配置 # exportJAVA_HOME=<jdk-install-dir& ...

  9. Struts2 stracture

  10. Maven+STS工程中Maven Dependencies 文件夹丢失问题

    在我们使用Maven+sts工程中偶尔会出现这种情况: Maven Dependencies文件夹在新打开的工程中丢失,造成 web project 自动编译出错,缺少必要的库文件: 如下图所示的情况 ...