Jquery无刷新实时更新表格数据
html代码:
<style>
.editbox
{
display:none
}
.editbox
{
font-size:14px;
width:70px;
background-color:#ffffcc; border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
</style>
<table width="600" align="center">
<tr class="head">
<th>First</th><th>Last</th>
</tr>
<?php
$sql=mysql_query("select * from add_delete_record");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$content=$row['content'];
$text=$row['text'];
if($i%2)
{
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<?php } else { ?>
<tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
<?php } ?>
<td width="50%" class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $content; ?></span>
<input type="text" value="<?php echo $content; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $text; ?></span>
<input type="text" value="<?php echo $text; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
</tr>
<?php
$i++;
}
?>
</table>
<script type="text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&content='+first+'&text='+last;
$("#first_"+ID).html('<img src="load.gif" />');
if(first.length && last.length>0)
{
$.ajax({
async: true,
type: "POST",
url: "update.php",
data: dataString,
dataType: "json",
cache: false,
beforeSend: function () {
running = true;
},
success: function(html)
{
$("#first_"+ID).html(html.first);
$("#last_"+ID).html(html.last);
} ,
error: function (result) {
console.log("erroe" + result);
},
});
}
else
{
alert('不能为空.');
}
});
$(".editbox").mouseup(function()
{
return false
});
$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});
});
</script>
PHP代码:
<?php
include_once('conn.php');
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$content=mysql_escape_String($_POST['content']);
$text=mysql_escape_String($_POST['text']);
$sql = "update add_delete_record set content='$content',text='$text' where id='$id'";
mysql_query($sql);
$rst = array();
$rst['first'] = $content;
$rst['last'] = $text;
echo json_encode($rst);
exit;
}
?>
Jquery无刷新实时更新表格数据的更多相关文章
- WinForm DataGridView实时更新表格数据
前言 一个特殊的项目没有用第三方控件库,但用到了DataGridView,由于是客户端产生的数据,所以原始数据源就是一个集合. 根据需要会向集合中添加数据项,或是修改某些数据项的值,但DataGrid ...
- jquery 无刷新添加/删除 input行 实时计算购物车价格
jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...
- ASP.NET MVC使用jQuery无刷新上传
昨晚网友有下载了一个jQuery无刷新上传的小功能,他尝试搬至ASP.NET MVC应用程序中去,在上传死活无效果.Insus.NET使用Teamviewer远程桌面,操作一下,果真是有问题.网友是说 ...
- android ListView中含有按钮事件实时更新ListView数据案例
1.布局文件Listview <?xml version="1.0" encoding="utf-8"?> <android.support. ...
- jquery 无刷新多级联动
原先不熟悉jquery时,总在寻找无刷新的方法,在此不断的积累自己所知道的jquery属性,常用方法.以下为jquery实现的无刷新联动事件 分公司: <select id="Sele ...
- WebSocket 实时更新mysql数据到页面
使用websocket的初衷是,要实时更新mysql中的报警信息到web页面显示 没怎么碰过web,代码写的是真烂,不过也算是功能实现了,放在这里也是鞭策自己,web也要多下些功夫 准备 引入依赖 & ...
- jQuery无刷新上传之uploadify简单试用
先简单的侃两句:貌似已经有两个月的时间没有写过文章了,不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章.前些天在研究“ajax无刷新上传”方面的一些插件,用SWFUpload实现了 ...
- jQuery无刷新上传学习心得
记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...
- jquery无刷新文件上传 解决IE安全性问题
很多项目中都需要有文件上传的功能,一般文件上传有几种方式,input file表单上传,flash上传. flash就不说了,能接受flash的就用吧. 下面介绍的这种是基于input file控件的 ...
随机推荐
- Ubuntu18.04下Python Web环境搭建
Python3的安装与卸载 pip, pip3的安装 Django2.x的安装 mysql的安装及命令行工具mycli的安装 virtualenv及virtualenvwrapper的安装 IPyth ...
- Python之进程 1 - 基本概念
一 背景知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所 ...
- JVM栈和堆的详解
一.基本了解 java的数据类型分为两种:基本类型和引用类型.基本类型的变量保存的是原始值,引用类型的变量保存的是引用值.引用值代表某个对象的引用,而不是对象本身,对象本身放在这个引用值所表示的地址的 ...
- linux时间戳和时间格式的转化
1.将时间戳转化为yyyy-MM-dd HH:mm:ss时间格式 date -d @时间戳(秒) 2.设置服务器时间---特别注意使用 date -s 时间
- 通过Java构造参数列表
背景:我们在进行性能测试时,需要构造测试数据,即参数化文件,如下: 上面的文件内容,我们可以通过Java代码轻松实现,主要代码解释: All 代码(其实我也看不懂,但是会改就行啦) package f ...
- React多行文本溢出处理(仅针对纯文本)
最多显示4行,第四行末尾显示“...”
- python第六天函数,定义、调用、不带参函数、带参函数等
在python定义函数需要用到的关键字是 def xxxx():,这个关键字就是 defined 的缩写.具体看实例: >>> def hello(): print("你 ...
- Battery historian安装及使用
在介绍Battery historian之前首先来介绍一下 Android adb bugreport 工具,bugreport是什么,怎么用? android系统想要成为一个功能完备,生态繁荣的操作 ...
- shiro登录验证原理
这段时间有点忙,没咋写博客,今天打开staruml看到以前画的一张shiro原理图,先在这发一下,空了再好好进行分析.
- Linux将rm命令设置为回收站【转】
一个方案就是重定向 rm 命令以嫁接为 mv 命令,相当于给 Linux 系统定制了一个回收站. 实现方式如下: ### 重定义rm命令 ### # 定义回收站目录 trash_path='~/.tr ...