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:#
} </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创建表格,删除数据的更多相关文章
- js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- Ajax:后台jquery实现ajax无刷新删除数据及demo
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8
- SQL Server 创建 修改 删除数据表
1. 图形界面方式操作数据表 (1)创建和修改数据表 列名中如果有两个以上单词时,最好用下划线连接,否则可能会给将来的查询维护带来不便.我们公司美国佬做的数据库就很烦,所有列名都有空格,一旦忘记用方括 ...
- MySQL 创建和删除数据表
创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (column_name col ...
- AJAX 创建表格
<html><head> <meta http-equiv="Content-Type" content="text/html; chars ...
- Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...
- mongodb系列~mongodb定时删除数据
一 简介:本文介绍创建自动删除数据的TTL索引 二 目的 定时删除数据三 创建方法 db.collection.createIndex(keys, options) options: ex ...
- mongodb定时删除数据(索引删除)
一 简介:本文介绍创建自动删除数据的TTL索引 二 目的 定时删除数据三 创建方法 db.collection.createIndex(keys, options) options: ex ...
- 数据库(概念、语法、DBMS、SQL语言:创建数据库、表格,添加、修改、删除数据记录)
关系型数据库:以表作为实体,以主键和外键关系作为联系的一种数据结构. 主键:在关系型数据库中,用一个唯一的标识符来标志每一行,这个标识符就是主键.主键有两个特点:非空和不能重复. 外键:在关系型数据库 ...
随机推荐
- dp和px转换
在编写自定义view的时候,通常会在onTouchEvent回调方法中进行一些关乎距离的判断逻辑,这里的距离常量如果适配到多分辨率的不同设备上时可能会出现一些错乱的问题. 所以一般来说,常常需要dp到 ...
- 运用Java对微信公众平台二次开发技术——开发者模式接入
当初我在这碰到了很多问题,市面上以及网络上的资料特别少,所以当初碰了很多壁,所以现在跟大家分享一下,如何用Java,对微信公众平台进行二次开发. 一.开发预备知识: 最基本的JavaSE与JavaWe ...
- 『随笔』WCF开发那些需要注意的坑
执行如下 批处理:"C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin\svcutil.exe" http://127.0.0.1: ...
- Android Studio修改项目的包名
android studio的修改包名,没有有Eclipse环境中那么好操作.也可能你对Eclipse的操作比较熟悉,对Andoid Studio的操作还不太熟悉.在项目的开发中,你可能遇到需要更改模 ...
- [USACO2005][POJ3044]City Skyline(贪心+单调栈)
题目:http://poj.org/problem?id=3044 题意:以坐标的形式给出一张图,表示一些楼房的正视图,求出楼房的最少个数. 分析:和小学常做的立方体问题很像,很容易想到一个贪心方法, ...
- cookie的一些细节
什么是 Cookie “cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie ...
- Linux_日志信息
一.httpd日志:/var/log/httpd1.软件位置:whereis httpd2.配置文件位置:/etc/httpd/conf/httpd.conf 二.mysql日志:/var/log 查 ...
- python 变量命名规范
python源码和其他一些书籍,命名各种个性,没有一个比较统一的命名规范.于是总结了一些,供参考. 模块名: 模块应该使用尽可能短的.全小写命名,可以在模块命名时使用下划线以增强可读性.同样包的命名也 ...
- Project facet Java version 1.8 is not supported解决记录
一看知道是因为jdk版本不一致所导致,如何解决? 方法一: 选中项目 Properties , 选择 Project Facets,右击选择 Java , Change Version 方法二: 在 ...
- 【poj3020】 Antenna Placement
http://poj.org/problem?id=3020 (题目链接) 题意 给出一个矩阵,矩阵中只有‘*’和‘o’两种字符,每个‘*’可以向它上下左右四个方位上同为‘*’的点连一条边,求最少需要 ...