首页>>表单>>jquery 点击表格变为input可以修改无刷新更新数据(2013-09-25)

jquery 点击表格变为input可以修改无刷新更新数据

 之前已经发了2篇类似的文章《点击变td为input更新》和《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》

这篇功能是一样的，不过实用性可能比不上前面的文章

 

 

jquery 点击表格变为input可以修改无刷新更新数据
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

PHP Code
  1. <table>  
  2. <Tr><Td colspan="2">如果本例看不到数据请先添加一条记录,点击<a href="?action=add">这里可以添加</a></Td></Tr>  
  3. <?php  
  4. $sql="select * from `add_delete_record` where id>0";  
  5. $rs=mysql_query($sql);  
  6. if ($row = mysql_fetch_array($rs))  
  7. {  
  8.     do {  
  9. ?>  
  10.   
  11. <Tr bgcolor="#eeeeee">  
  12. <Td><?php echo $row['id']?></Td>  
  13. <Td class="bigclassname" ><span title="点击修改"><?php echo $row['text']?></span></Td>  
  14. </Tr>  
  15. <?php   
  16.     }  
  17.       
  18.     while ($row = mysql_fetch_array($rs));  
  19. }?>  
  20. </table>  
JavaScript Code
  1. <script>  
  2. /**//*  
  3. * 说明：用Jquery的方法，无刷新页面，编辑表格  
  4. */   
  5.   
  6. $(function() {   
  7. //给页面中有bigclassname类的标签上加上click函数   
  8. $(".bigclassname").click(function() {   
  9.   
  10. var objTD = $(this);   
  11.   
  12. //先将老的类别名称保存起来,并用trim方法去掉左右多余的空格   
  13. var oldText = $.trim(objTD.text());   
  14.   
  15. //构造一个input的标签对象（作用是为了让这个input失效，不然点击多次后，文字会消失）   
  16. var input = $("<input type='text' value='" + oldText + "' />");   
  17.   
  18. //当前td的内容变为文本框，并且把老类别名放进去   
  19. objTD.html(input);   
  20.   
  21. //设置文本框的点击事件失效   
  22. input.click(function() {   
  23. return false;   
  24. });   
  25.   
  26. //设置文本框样式，让界面显示的人性化点   
  27. input.css("font-size", "16px");   
  28. input.css("text-align", "center");   
  29. input.css("background-color", "#ffffff");   
  30. input.width("120px");   
  31.   
  32. //自动选中文本框中的文字   
  33. input.select();   
  34.   
  35. //文本框失去焦点时重新变为文本   
  36. input.blur(function() {   
  37.   
  38. //获得新输入的类别名   
  39. var newText = $(this).val();   
  40.   
  41. //用新的类别名文字替换之前变过来的输入框状态   
  42. objTD.html(newText);   
  43.   
  44. //获取该类别名所对应的ID(bigclassid)   
  45. var bigclassid = objTD.prev().text();   
  46.   
  47. //将新的类别名进行转码，不然界面以及数据库显示的都是"???"这样的乱码   
  48. newText = escape(newText);   
  49.   
  50. //获取要传到"一般处理文件"(update_bigclassname_2.php)中的URL   
  51. var url = "update.php?id=" + bigclassid + "&bigclassname=" + newText;   
  52.   
  53. //AJAX异步更改数据库,data为成功后的回调返回值，用于显示提示信息   
  54. $.get(url, function(data) {});   
  55.   
  56. });   
  57. });   
  58. });   
  59. </script>  

 


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