AJAX即时编辑网页中的数据

  
  
  
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>编辑</title> 
  6. <script type="text/javascript"> 
  7. var curObj = null;  
  8. function showForm(obj){  
  9.   if (curObj == null){  
  10.     curObj = obj;  
  11.     obj.innerHTML = "<textarea onblur=\"submitIt(this);\">" + obj.innerHTML + "</textarea>";  
  12.     obj.firstChild.select();  
  13.   }  
  14. }  
  15.  
  16. function submitIt(obj){  
  17.   curObj.innerHTML = obj.value;  
  18.   curObj = null;  
  19. }  
  20. </script> 
  21. <style> 
  22. div {  
  23.   overflow: auto;  
  24.   padding:5px;  
  25.   border:1px solid #FF6600;  
  26.   background-color:#FFFFCC;  
  27.   width:200px;  
  28.   height:160px;  
  29. }  
  30. form {  
  31.   margin: 0;  
  32. }  
  33. textarea {  
  34.   border:1px solid #999999;  
  35.   width: 190px;  
  36.   height: 150px;  
  37. }  
  38. </style> 
  39. </head> 
  40. <body> 
  41. <div id="editArea_1" onclick="showForm(this);">Here is some <strong>text</strong>.</div> 
  42. <br /> 
  43. <div id="editArea_2" onclick="showForm(this);">Here is some text.<br /> 
  44. <br /> 
  45. Just so so... :D </div> 
  46. </body> 
  47. </html> 

 

你可能感兴趣的:(Ajax,即时编辑,休闲,网页中的数据,即时编辑数据)