Jquery+ashx 雙擊bootstarp 中table 的td單元格進行編輯

效果圖：

JS代碼：

//採購申請、紙箱採購查找要編輯的單元格，新增單價、歸屬客戶
function EditTdInputInfo(inserttype, pauseNo, orderLineNo, columnName, goodsPrice)
{
    //紙箱規格類型
    var zxtype;
    if (inserttype == "CGC")
    {
        zxtype = $(".selectEditInput").val();
        if ($("#txtCustomer").val() == "" || $("#txtCustomer").val() == undefined) {
            alert('請先輸入歸屬客戶,以便於計算箱價格。'); return false;
        }
        else {
            $(".selectEditInput").change(function () {
                zxtype = $(this).val();
                if (zxtype == "請選擇") { alert('請選擇規格類型。'); return false; }
                else EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, zxtype, $("#txtCustomer").val(), goodsPrice);
            });
        }
    }
    //給這些單元格註冊鼠標點擊的事件
    $(".editInput").click(function () {
        //找到當前鼠標點擊的td,this對應的就是響應了click的那個td
        var tdObj = $(this);
        if (tdObj.children("input").length > 0) {
            //當前td中input，不執行click處理
            return false;
        }
        var text = tdObj.html();
        //清空td中的內容
        tdObj.html("");
        //創建一個文本框
        //去掉文本框的邊框
        //設置文本框中的文字字體大小是12px
        //使文本框的寬度和td的寬度相同
        //設置文本框的背景色
        //需要將當前td中的內容放到文本框中
        //將文本框插入到td中
        var inputObj = $("<input type='text'class='input-mini' />").val(text).appendTo(tdObj); //是文本框插入之後就被選中
        inputObj.trigger("focus").trigger("select");
        inputObj.click(function () {
            return false;
        });
        //處理文本框上回車和esc按鍵的操作
        inputObj.keyup(function (event) {
            //獲取當前按下鍵盤的鍵值
            var keycode = event.which;
            //處理回車的情況
            if (keycode == 13) {
                if (zxtype == "請選擇") {
                    alert('請選擇規格類型。'); return false;
                }
                else {
                    //獲取噹噹前文本框中的內容
                    var inputtext = zxtype != "" ? zxtype : $(this).val();
                    //將td的內容修改成文本框中的內容
                    tdObj.html(inputtext);
                    EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, inputtext, $("#txtCustomer").val(), goodsPrice);
                }
            }
            //處理esc的情況
            if (keycode == 27) {
                //將td中的內容還原成text
                tdObj.html(text);
            }
        });
        //鼠標離開是保存
        inputObj.blur(function () {
            if (zxtype == "請選擇") {
                alert('請選擇規格類型。'); return false;
            }
            else {
                //獲取噹噹前文本框中的內容
                var inputtext = zxtype != ""  ? zxtype : $(this).val();
                //將td的內容修改成文本框中的內容
                tdObj.html(inputtext);
                EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, inputtext, $("#txtCustomer").val(), goodsPrice);
            }
        });
    });zxtype = '';//清空紙箱規格類型
}
//共用編輯採購商品數量、備註等信息
function EditInputInfoPost(inserttype, pauseNo, orderLineNo, columnName, editInfo, theCustomer,goodsPrice) {
    var titleType = ReturnAlertTitle(inserttype);
    var insertInfo = '';
    //判斷是否是紙箱採購
    if (inserttype == "CGC") insertInfo = inserttype + "," + pauseNo + "," + orderLineNo + "," + columnName + "," 
+ editInfo + "," + theCustomer + "," + goodsPrice;
    else insertInfo=inserttype + "," + pauseNo + "," + orderLineNo + "," + columnName + "," + editInfo;
    $.ajax({
        type: "post",
        url: "../../WorkFlowHandler.ashx",
        data: "UpdateSelectGoodsLisInfo=" + encodeURIComponent(insertInfo) + "&currPage=1",
        datatype: "html",
        success: function (returnData, textstatus, xmlhttprequest) {
            ShowSelectGoodsListHtml(inserttype, returnData);//採購、領用、調撥、紙箱採購
        },
        error: function (errorinfo) {
            alert("獲取要更新的" + titleType+"商品列表數據請求錯誤。");
        }
    });
}

C# 代碼：

 /// <summary>
        /// 更新採購商品明細表中的數量和備註等信息
        /// </summary>
        /// <param name="insertType">編輯類型</param>
        /// <param name="pauseNo">採購單號</param>
        /// <param name="orderLineNo">行號</param>
        /// <param name="columnName">列名</param>
        /// <param name="editInfo">編輯信息</param>
        public static void UpdateSelectGoodsListData(string insertType, string pauseNo,
            string orderLineNo, string columnName, string editInfo, string theCustomer, string goodsPrice)
        {
            var aspx = ReturnPageName(insertType);
            log4net.ILog log = log4net.LogManager.GetLogger(aspx);
            var typeName = ReturnTypeName(insertType);
            using (WHSMDataContext db = new WHSMDataContext())
            {
                try
                {
                    ApprovePlanOrder_Details updateInfo = db.ApprovePlanOrder_Details.Single(x => x.approveID == pauseNo && 
x.orderLineNo == int.Parse(orderLineNo));
                    var upBoxSize = string.IsNullOrEmpty(Regex.Replace(updateInfo.goodsTitle, @"[\u4e00-\u9fa5]", "")) == true ?
 "0*0*0" : Regex.Replace(updateInfo.goodsTitle, @"[\u4e00-\u9fa5]", "");
                    var upTitle = GetChineseWord(updateInfo.goodsTitle);
                    var splitUpBoxSize = upBoxSize.Split('*');
                    //（長+寬+4）*（寬+高+5）*單價*2/10000 紙箱採購價格計算公式
                    //迦南    （長+寬+8）
                    var cartonPrice = 0.0m;
                    //處理迦南 紙箱長
                    var customerCos = theCustomer.Contains("迦南") ? 8 : 4;
                    switch (columnName)
                    {
                        case "goodsBuyNo":
                            updateInfo.goodsBuyNo = int.Parse(editInfo);
                            break;
                        case "goodsNote":
                            updateInfo.goodsNote = editInfo;
                            break;
                        case "goodsPrice":
                            updateInfo.goodsPrice = Convert.ToDecimal(editInfo);
                            break;
                        case "L":
                            updateInfo.goodsTitle = upTitle+ editInfo +"*"+splitUpBoxSize[1] + "*" + splitUpBoxSize[2];
                            updateInfo.goodsSpec = editInfo + "*" + splitUpBoxSize[1] + "*" + splitUpBoxSize[2];
                            cartonPrice =  (Convert.ToInt32(editInfo) + Convert.ToInt32(splitUpBoxSize[1]) + customerCos) 
*  (Convert.ToInt32(splitUpBoxSize[1]) + Convert.ToInt32(splitUpBoxSize[2]) + 5) * Convert.ToDecimal(goodsPrice) *2 / 10000;
                            updateInfo.goodsPrice = cartonPrice;
                            break;
                        case "W":
                            updateInfo.goodsTitle = upTitle + splitUpBoxSize[0] + "*" + editInfo + "*" + splitUpBoxSize[2];
                            updateInfo.goodsSpec =   splitUpBoxSize[0] + "*" + editInfo + "*" + splitUpBoxSize[2];
                            cartonPrice =  (Convert.ToInt32(splitUpBoxSize[0]) + Convert.ToInt32(editInfo) + customerCos) 
* (Convert.ToInt32(editInfo) + Convert.ToInt32(splitUpBoxSize[2]) + 5) * Convert.ToDecimal(goodsPrice) * 2 / 10000;
                            updateInfo.goodsPrice = cartonPrice;
                            break;
                        case "H":
                            updateInfo.goodsTitle = upTitle + splitUpBoxSize[0] + "*" + splitUpBoxSize[1] + "*" + editInfo;
                            updateInfo.goodsSpec = splitUpBoxSize[0] + "*" + splitUpBoxSize[1] + "*" + editInfo;
                            cartonPrice =(Convert.ToInt32(splitUpBoxSize[0]) + Convert.ToInt32(splitUpBoxSize[1]) + customerCos)
 *(Convert.ToInt32(splitUpBoxSize[1]) + Convert.ToInt32(editInfo) + 5) * Convert.ToDecimal(goodsPrice) * 2 / 10000;
                            updateInfo.goodsPrice = cartonPrice;
                            break;
                        case "zxtype":
                            updateInfo.zxtype = editInfo;
                            updateInfo.goodsTitle = editInfo + upBoxSize;
                            updateInfo.goodsSpec = splitUpBoxSize[0] + "*" + splitUpBoxSize[1] + "*" + splitUpBoxSize[2];
                            break;
                        
                    }
                    log.Info(new LogContent(ShareApplyClass.GetIPAddress(), HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"],
                   aspx + "更新" + typeName + "商品信息", "更新" + typeName + "單號:" + pauseNo + "下行號爲" + orderLineNo + "的商品中信息。"));
                    db.SubmitChanges();
                }
                catch (Exception ex)
                {
                    log.Fatal(new LogContent(ShareApplyClass.GetIPAddress(), HttpContext.Current.Request.Cookies["UserLogin"]["ClientName"],
                       aspx + "更新" + typeName + "商品信息", ex.Message + ":" + ex.StackTrace));
                }

            }
        }
        /// <summary>
        /// 正則獲取漢字
        /// </summary>
        /// <param name="oriText"></param>
        /// <returns></returns>
        public static string GetChineseWord(string oriText)
        {
            string x = //@"^[\u4e00-\u9fa5]+$";//匹配字符串全部是中文字符
            @"^[\u4e00-\u9fa5]+";//匹配字符串中以中文字符結尾
            MatchCollection Matches = Regex.Matches
            (oriText, x, RegexOptions.IgnoreCase);
            StringBuilder sb = new StringBuilder();
            foreach (Match NextMatch in Matches)
            {
                sb.Append(NextMatch.Value);
            }
            return sb.ToString();

        }

編輯時效果：

編輯完成後效果：
參考地址：
https://www.cnblogs.com/Leo_wl/p/3249872.html
http://www.php.cn/csharp-article-361297.html
http://www.cnblogs.com/songjl/p/7088356.html
http://www.cnblogs.com/Leo_wl/p/6699165.html
http://www.cnblogs.com/landeanfen/p/5821192.html
http://blog.csdn.net/qq_34905123/article/details/53609004
http://www.cnblogs.com/landeanfen/p/5005367.html
http://www.cnblogs.com/gamehiboy/p/5176618.html
http://www.cnblogs.com/superstar/p/5496528.html