td点击后变为input可以输入,更新数据,无刷新更新

XML/HTML Code
  1. <table border="0" cellpadding="0" cellspacing="0">
  2. <tr>
  3. <th><a href="http://www.freejs.net">freejs.net演示</a></td>
  4. <th scope="col">列1</th>
  5. <th scope="col">第二列</th>
  6. <th scope="col">其他</th>
  7. </tr>
  8. <tbody>
  9. <?php
  10. require "conn.php";
  11. $sql="select * from `add_delete_record` where id>0";
  12. $rs=mysql_query($sql);
  13. if ($row = mysql_fetch_array($rs))
  14. {
  15. do {
  16. ?>
  17. <tr>
  18. <th><?php echo $row['id']?></th>
  19. <td class="content"><?php echo $row['content']?></td>
  20. <td class="text"><?php echo $row['text']?></td>
  21. <td class="position"><?php echo $row['position']?></td>
  22. </tr>
  23. </Tr>
  24. <?php
  25. }
  26. while ($row = mysql_fetch_array($rs));
  27. }?>
  28. </tbody>
  29. </table>
  30. 注意:5个字符以上数据库不能添加
  31. <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
  32. <script type="text/javascript">
  33. $(function(){
  34. $('table td').click(function(){
  35. if(!$(this).is('.input')){
  36. $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
  37. var thisid = $(this).parent().siblings("th:eq(0)").text();
  38. var thisvalue=$(this).val();
  39. var thisclass = $(this).parent().attr("class");
  40. $.ajax({
  41. type: 'POST',
  42. url: 'update.php',
  43. data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue
  44. });
  45. $(this).parent().removeClass('input').html($(this).val() || 0);
  46. });
  47. }
  48. }).hover(function(){
  49. $(this).addClass('hover');
  50. },function(){
  51. $(this).removeClass('hover');
  52. });
  53. });
  54. </script>

update.php

PHP Code
  1. <?php
  2. require "conn.php";
  3. $id = trim($_REQUEST['thisid']);
  4. $thisclass = trim($_REQUEST['thisclass']);
  5. $thisvalue= trim($_REQUEST['thisvalue']);
  6. if (substr_count($thisclass," ")>0){
  7. $thisclass=str_replace(" ","",$thisclass);
  8. }
  9. if (substr_count($thisclass,"input")>0){
  10. $thisclass=str_replace("input","",$thisclass);
  11. }
  12. $update_sql = "update add_delete_record set $thisclass='$thisvalue' where id='$id'";
  13. $result = mysql_query($update_sql);
  14. ?>

原文地址:
http://www.freejs.net/article_biaodan_34.html

jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格的更多相关文章

  1. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  2. EF修改对象里面的值。。。(对象字段多的时候)

    后台代码 public ActionResult Edit(my m)//my实体类 { testEntities t = new testEntities();//数据库上下文 t.my.Attac ...

  3. 微信小程序 this.setData 修改json里面的值

    page({ data:{ s1:{a:"",b:"b"} }, changeData:function(e){ var cData=this.data.s1; ...

  4. Activity往另外一个Activity传值,Fragment获取另外一个Activity里面的值。

    在oneActivity中实现跳转到MainActivity //intent 用来跳转另外一个MainActivity,bundle传值到MainActivity         Intent Ma ...

  5. js获取单选框里面的值

    rt,如果想获取单选框里面的值,该如何获取呢. <script> window.onload = function(){ //通过名字获取 getElementsByName //var ...

  6. javaWeb中怎么获取提交表单里面的值

    在javaWeb中如何获得html文件中的表单里面的值? <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. 提取数据库字段里面的值,并改变+图片懒加载,jquery延迟加载

    要求:手机端打开某个页面的详细信息,因为网速或者别的原因,响应太慢,因为图片大的原因,希望先进来,图片在网页运行的情况再慢慢加载(jquer延迟加载) http://www.w3cways.com/1 ...

  8. 微信小程序--修改data数组或对象里面的值

    1.初始data数据 Page({     data:{          code:'1234',         reward:[{             name:"艾伦" ...

  9. win8 修改msconfig 里面的"引导高级选项" 最大内存后 BSOD的解决方案

    最近由于本人的电脑一直非常卡,于11.4日通过win8任务管理器分析发现 Peer Name Resolution Protocol Peer Networking Grouping Peer Net ...

随机推荐

  1. codeforces 21D. Traveling Graph 状压dp

    题目链接 题目大意: 给一个无向图, n个点m条边, 每条边有权值, 问你从1出发, 每条边至少走一次, 最终回到点1. 所走的距离最短是多少. 如果这个图是一个欧拉回路, 即所有点的度数为偶数. 那 ...

  2. 使用verilog实现4选1数据选择器的几种方法

    第一种方法module mux( d1, d2, d3, d4, se1, se2, dout ); input d1; input d2; input d3; input d4; input se1 ...

  3. STL容器的内存分配

    这篇文章参考的是侯捷的<STL源码剖析>,所以主要介绍的是SGI STL实现版本,这个版本也是g++自带的版本,另外有J.Plauger实现版本对应的是cl自带的版本,他们都是基于HP实现 ...

  4. iphone:自定义UIAlertView

    由于项目中有这样一个需求:需要在保存是弹出框选择保存的地点.选择UIAlertView来实现,但是要在UIAlertView中增加UISwitch的控件,这就需要自定义一个继承UIAlertView的 ...

  5. android ndk jni 环境搭建

    关于ndk jni网上的介绍很多,其实我了解这个主要是因为自己是做嵌入式的,一则是对C语音有感情  二则是知道jni  可以绕过framework 框架直接操作硬件抽象层. 1.概述 对于ndk, j ...

  6. Ubuntu eclipse :An error has occurred. See the log file

    安装eclipse: sudo apt-get install eclipse-platform 调整java: sudo update-alternatives --config java 启动: ...

  7. WIX 学习笔记- 1 简介

    一个项目 Code Complete 后,程序员们欢欣鼓舞,以为事情到此结束,可以 Happy 了.其实 Code Complete 五十之于百里.一个没有运行在设备上,为人们创造价值的项目是注定失败 ...

  8. poj2190

    #include <stdio.h> #include <stdlib.h> int main() { ]; ,i; scanf("%s",arr); ;i ...

  9. oracle11g ora-12514监听程序当前无法识别

    环境:win7_x64 ,oracle11g 描写叙述:1第一天没问题,第二天就不能连接: 2:pl sql developer连接工具,自己安装的oracle数据库,又装了client 3:装了or ...

  10. 权威指南之脚本化jquery

    jqury函数 jquery()($())有4种不同的调用方式 第一种是最常用的调用方式是传递css选择器(字符串)给$()方法.当通过这种方式调用时,$()方法会返回当前文档中匹配该选择器的元素集. ...