本例与《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》差不多的功能,但是本例的更新是一次更新一行数据,具体的请看更新文件table_edit_ajax.php。
数据库当然也是相同的,
PHP Code
- <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>
- <div align="center"><s
主要是js文件
JavaScript Code
- <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({
- type: "POST",
- url: "table_edit_ajax.php",
- data: dataString,
- cache: false,
- success: function(html)
- {
- $("#first_"+ID).html(first);
- $("#last_"+ID).html(last);
- }
- });
- }
- else
- {
- alert('不能为空.');
- }
- });
- $(".editbox").mouseup(function()
- {
- return false
- });
- $(document).mouseup(function()
- {
- $(".editbox").hide();
- $(".text").show();
- });
- });
- </script>
table_edit_ajax.php
PHP Code
- <?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);
- }
- ?>
相关推荐
jQuery AJAX表格控件(初版)源码 测试版 JQUERY 实现的AJAX表格操作控件 设计上需要改进 初步功能已实现 边个实现了数据库的添加 编辑 删除等基本功能 详细请查看代码
jQuery表格插件无刷新表格控制分页显示数据
代码简介:jQuery不刷新分页动态数据表格代码是一款实用的jquery表格插件。
主要为大家详细介绍了Ajax实现表格中的信息不刷新页面进行更新数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头,编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
jQuery不刷新分页动态数据表格代码是一款实用的jquery表格插件。
主要介绍了bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法,需要的朋友可以参考下
jQuery不刷新分页动态数据表格代码是一款实用的jquery表格插件。
html5 无刷新表单 无Js代码,无刷新表单验证特效,没有使用jQuery和其它的JavaScript特效,无刷新的表单验证,如果你输入的内容不符合要求,则本表单不能被提交,但没发现表单中有提示效果,我只是在Chrome下做了...
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
用jQuery实现客户端表格分页!可用于绑定数据后
Layui调用json获取表格动态数据代码,treetable是一款功能强大的树形表格插件,支持全部展开,全部折叠,刷新表格,修改,删除等功能。
jquery初学者实例大全,里面一共包括了三季内容,有些是作者自创的实例,有些是从网络上下载然后修改的,对jquery初学者来说,非常实用且基础的实例,比如一些弹出信息框、伪装链接、无刷新提交、表格排序、更改字体...
使用了jquery框架接收json数据 数据库为sql server 2k 开发工具为vs 2005
使用jQuery tablefilter实现对表格数据无刷新筛选,so cool~~
ajax从后台读json数据,jquery在页面简析,以表格的形式出现,局部刷新
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。主要的特点包括:多列排序支持文本、URL地址、数值、IP...