1. 程式人生 > >點選後變為可編輯狀態(ajax非同步提交)

點選後變為可編輯狀態(ajax非同步提交)

<script>
//相當於在頁面中的body標籤加上onload事件  
$(function(){  
    //找到所有的td節點  
    var tds=$("td");  
    //給所有的td新增點選事件  
    tds.click(function(){  
        //獲得當前點選的物件  
        var td=$(this); 
        //取出當前td的文字內容儲存起來  
        var oldText=td.text();  
        //建立一個文字框,設定文字框的值為儲存的值     
        var input=$("<input type='text' value='"+oldText+"'/>");
        //alert(oldText);   
        //將當前td物件內容設定為input  
        td.html(input);
        //設定文字框的點選事件失效  
        input.click(function(){  
            return false;  
        });  
        //設定文字框的樣式  
        input.css("border-width","0");                
        input.css("font-size","16px");  
        input.css("text-align","left");  
        //設定文字框寬度等於td的寬度  
        input.width(td.width());  
        //當文字框得到焦點時觸發全選事件    
        input.trigger("focus").trigger("select");   
        //當文字框失去焦點時重新變為文字  
        input.blur(function(){  
            var input_blur=$(this);        
            //儲存當前文字框的內容  
            var newText=input_blur.val();
            //非同步儲存
            $.ajax({ 
            	type:"POST",
            	url: "http://localhost/weizhuangxiu/index.php?m=formguide&c=save&a=ajaxsave&formid=<?php echo $formid;?>&did=<?php echo $did;?>",
            	data:"note="+newText, 
            	success:function(msg){ 
    	            	if(msg=="ok"){ 
    	            		//alert(msg);
    	            	} 
    	            	else 
    	            	{   
        	            	 alert(msg);     	  
    		            	alert("fail");
    	            	} 
            		} 
            	});
           td.html(newText);   
        });    
        //響應鍵盤事件  
        input.keyup(function(event){  
            // 獲取鍵值  
            var keyEvent=event || window.event;  
            var key=keyEvent.keyCode;  
            //獲得當前物件  
            var input_blur=$(this);  
            switch(key)  
            {  
                case 13://按下回車鍵,儲存當前文字框的內容  
                    var newText=input_blur.val();
                    //非同步儲存
                    $.ajax({ 
                    	type:"POST",
                    	url: "http://localhost/weizhuangxiu/index.php?m=formguide&c=save&a=ajaxsave&formid=<?php echo $formid;?>&did=<?php echo $did;?>",
                    	data:"note="+newText, 
                    	success:function(msg){ 
            	            	if(msg=="ok"){ 
            	            		//alert(msg);
            	            	} 
            	            	else 
            	            	{   
                	            	 alert(msg);     	  
            		            	alert("fail");
            	            	} 
                    		} 
                    	});   
                    td.html(newText);  
                   
                break;  
                  
                case 27://按下esc鍵,取消修改,把文字框變成文字  
                    td.html(oldText);   
                break;  
            }  
        });  
    });  
});  

</script>

相關推薦

變為編輯狀態ajax非同步提交

<script> //相當於在頁面中的body標籤加上onload事件 $(function(){ //找到所有的td節點 var tds=$("td"); //給所有的td新增點選事件 tds.click(f

servlet3.0以上form表單提交ajax非同步提交

一、普通form提交 1、jsp <form id="form" method="post" name="upload" enctype="multipart/form-data" action="/index.do"> <input type=

Android顯示一個編輯文字的dialog解決失去游標問題

前言: 一個簡單的實現方式舉例。 描述: 需求上可能會提出這樣一點:點選一個按鈕,展示一個dialog彈窗,這個彈窗上有①可編輯文字,②確定按鈕,③取消按鈕。 具體操作: 那麼針對這個需求,我們常規性的話,應該建立一個工程,寫一個demo,建立一個BaseActivity介面,讓我們後續建

js和jQuery實現雙擊表格變為編輯狀態

看到別人的程式碼,自己分析加的備註,直接上程式碼! <style type="text/css"> body {font-size: 12px; } td {border-width: 1px;border-top-style: solid;border-rig

layui按鈕新增編輯的一行

昨天已經成功添加了一行,今天希望所新增的一行可以進行單元格編輯。 然而,發現添加了edit:'text'以後也不可以進行單元格編輯,而原本已有的資料可以,因此通過瀏覽器除錯看了原有資料的樣式,如圖所示: 因此,將點選按鈕新增一行<tr>標籤的方法,修改為如下

將瀏覽頁面變為編輯狀態

除錯過程往往需要直接去掉一些元素,可以同過瀏覽器執行js來實現頁面元素可編輯。位址列中鍵入如下後回車:javascript:document.body.contentEditable='true';document.designMode='on'; void 0瀏覽器如果跳轉

CButton控制元件:MFC如何給按鈕新增圖片,顯示三種狀態,分別是、盤旋、初始狀態也不盤旋狀態

// PicButton.cpp : 實現檔案//#include "stdafx.h"#include "MFCApplication5.h"#include "PicButton.h"// CPicButtonIMPLEMENT_DYNAMIC(CPicButton, CButton)CPicButton

幾種實現修改按鈕編輯文字,不則不可編輯的方式

第一種: <html> <head> <script type="text/JavaScript" language="JavaScript"> function doclick(){ var docs = document.getEle

文字變成編輯的文字

方法一(JS控制): 首先弄清楚我們完成這個工作要做些什麼: 1、點選文建立一個文字框(input); 2、將原文字的內容放到文字框裡; 3、當我們點選別的區域時文字框變成不可編輯的文字; 4、此時文字應該是修改過後的(如果有修改); 搞清楚原理那麼

wpf中ListView控制元件列頭排序功能實現超簡潔實用

 .xaml檔案中的主要程式碼 <ListView Name="lvMeasureData" GridViewColumnHeader.Click="Sort_Click" SelectionChanged="lvMeasureData_SelectionChanged"

vue 表格資料編輯取消或者完成按鈕,關閉編輯狀態沒有及時生效

點選編輯按鈕: 編輯狀態下,表格可以編輯。但是點選“確認”或者“取消”按鈕,列資料編輯狀態已經修改,但是檢視沒有改變。  頁面程式碼: 獲取當前行的index,並直接修改當前行用於判斷是否編輯狀態的資料為false(不可編輯);   根本原因是因為vue的檢視更新不及

js使內容變成編輯狀態

程式碼如下 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge

修改按鈕,將alv某列的不可編輯狀態轉為編輯狀態

該例子是將YFKJE的欄位的不可編輯屬性修改為可編輯狀態,其實就是將fieldcat的fieldname為YFKJE即這一列,修改其EDIT屬性 LOOP AT fieldcat WHERE

extjs 表格為編輯,保存為不可編輯狀態

action bottom ams res read true turn jre sql 畫出表格 編輯後 思路:在初始時設置一個狀態,panduan=‘0‘,此時,就是一個不可編輯的input,當點擊編輯時,改變panduan = ‘1‘,即可編輯。保存是加入正則表

vue 表格數據編輯擊取消或者完成按鈕,關閉編輯狀態沒有及時生效

分享 inf bsp 狀態 修改 點擊 視圖 進行 解決 點擊編輯按鈕: 編輯狀態下,表格可以編輯。但是點擊“確認”或者“取消”按鈕,列數據編輯狀態已經修改,但是視圖沒有改變。 頁面代碼: 獲取當前行的index,並直接修改當前行用於判斷是否編輯狀態的數據為false

java簡單部落格系統導航標籤頁頁面內容改變及背景色改變

一、同一個Servlet處理多個請求,顯示不同的頁面內容 導航標籤頁 bootStrap模板: <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home

NSTextField 處於編輯狀態時,return鍵 結束編輯,NSButton的return快捷方法不響應

NSButton 設定快捷鍵 return, 當 NSTextField 處於編輯狀態時, 點選return鍵 結束編輯,要求不響應button的return快捷方法 attributes inspector 面板中設定 NSTextField 的 Action 屬性 為 Send On Ent

收藏、贊按鈕 怎麼由當前的狀態收藏/取消收藏通過設定為取消收藏收藏

看到這裡,我是想介紹我對這個收藏按鈕(五角星),反覆點選來迎合使用者體驗的。那怎麼滿足反覆點選設定狀態呢? 要求是這樣的:我點選收藏按鈕(假設:原先的收藏按鈕是未收藏狀態(暗色)),當我點選過收藏的時候,按鈕被點亮為橙色。當我再次對其點選的時候,當然,我要知道此時的收藏按鈕

Button 改變顏色 不是改變顏色又恢復

慣例先上效果圖 1.首先我們想製作這個按鈕的樣式 建立一個selector的xml檔案規定了,按鈕,被按下和不被按下時的背景顏色不懂的同學點選這裡 <?xml version="

安卓控制元件動畫產生波紋效果

<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_cont