首页>>表单>>点击变td为input更新(2013-09-25)

点击变td为input更新

数据库很简单

表add_delete_record

字段text和id

点击变td为input更新
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 index.php

 

PHP Code
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4. <title>jquery 点击表格变为input可以修改,鼠标点击其他任意位置无刷新更新数据</title>  
  5. <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>   
  6. <?php  
  7. require "conn.php";  
  8. if ($_REQUEST['action']=="add"){  
  9.     //判断记录数量  
  10.     $sql_count="select count(*) from `add_delete_record` where id>0";  
  11.     $rs=mysql_query($sql_count);  
  12.     $myrow = mysql_fetch_array($rs);  
  13.   
  14.     $numrows=$myrow[0];  
  15.     if ($numrows<5){  
  16.     $insert_sql="insert into add_delete_record (text) values ('测试数据')";  
  17.     $result = mysql_query($insert_sql);  
  18.     }  
  19. }  
  20.   
  21. ?>  
  22. <h3>本例jquery 1.9.1无法运行,现在测试的是1.3.2</h3>  
  23. <table>  
  24. <Tr><Td colspan="2">如果本例看不到数据请先添加一条记录,点击<a href="?action=add">这里可以添加</a></Td></Tr>  
  25. <?php  
  26. $sql="select * from `add_delete_record` where id>0";  
  27. $rs=mysql_query($sql);  
  28. if ($row = mysql_fetch_array($rs))  
  29. {  
  30.     do {  
  31. ?>  
  32.   
  33. <Tr bgcolor="#eeeeee">  
  34. <Td class="catid" style="display:none"><?php echo $row['id']?></Td>  
  35. <Td><span class="listorder" title="点击修改"><?php echo $row['text']?></span></Td>  
  36. </Tr>  
  37. <?php   
  38.     }  
  39.       
  40.     while ($row = mysql_fetch_array($rs));  
  41. }?>  
  42. </table>  
  43. <script>  
  44. $('.listorder').click(function(e){  
  45. var catid = $(this).parent().siblings("td:eq(0)").text();//获取同一行上 第一列中的id值  
  46. var listorder_now_text = $(this).text();//获取listorder中的内容 先保存起来  
  47. $(this).text("");//设置内容为空  
  48. var list_form = '<input type="text" value="'+listorder_now_text+'" size=5 class="listorder_input" />' ;  
  49. $(this).parent().append(list_form); //插入 input框  
  50. $(".listorder_input").focus();  
  51.   
  52. //自定义一个div 提示修改中  
  53. var loading = '<div id="loading"><img src="loading.gif" alt="修改中..." width="20" /></div>';  
  54. $(this).parent().append(loading);  
  55. $('#loading')  
  56. .css({  
  57. "color" : "red" ,  
  58. "display" : "none"  
  59. })  
  60. //定义ajax的全局事件  
  61. $(this).ajaxStart(function(){  
  62. $('#loading').show();  
  63. })  
  64. $(this).ajaxStop(function(){  
  65. $('#loading').remove();  
  66. })  
  67.   
  68. $(".listorder_input").blur(function(){  
  69. var thislist = $(this).siblings(); //取得同级的标签 即 修改后需要显示的 listorder  
  70. $.post("update.php",{  
  71. action : "mod_listorder",  
  72. catid : catid ,  
  73. listorder : $(this).attr("value")  
  74. } , function(data, textStatus){  
  75. $(thislist).text(data);  
  76. }  
  77. );//end .post  
  78. $(this).remove();  
  79. })//end function blur  
  80. })// end function click  
  81.   
  82. </script>  

 update.php

PHP Code
  1. <?php  
  2. require "conn.php";  
  3. $id = trim($_REQUEST['catid']);  
  4. $text = trim($_REQUEST['listorder']);  
  5. $update_sql = "update add_delete_record set text='$text' where id='$id'";  
  6. $result = mysql_query($update_sql);  
  7. echo $text;  
  8. ?>   

 


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