這個(gè)方法網(wǎng)上可以查到很多，但是好多只有點(diǎn)擊文字編輯并保持，但是沒有完整的代碼寫怎么保存到數(shù)據(jù)庫。因?yàn)楸救瞬攀鑼W(xué)淺，費(fèi)啦好長(zhǎng)時(shí)間才寫好把修改的內(nèi)容只用一條sql語句保存到數(shù)據(jù)庫，今天在這里和大家分享

這是運(yùn)行圖片

?

這是前臺(tái)頁面 03.aspx頁面

訂單名稱：
產(chǎn)品類型:		狀態(tài):		印量:
收貨信息:
總金額:

這是js 03.js

$(function () {

//獲取class為caname的元素

$(".caname").click(function () {

var td = $(this);

var txt = $.trim(td.text());

var input = $("");

td.html(input);

input.click(function () { return false; });

//獲取焦點(diǎn)

input.trigger("focus");

//文本框失去焦點(diǎn)后提交內(nèi)容，重新變?yōu)槲谋?/p>

input.blur(function () {

var newtxt = $(this).val();

//判斷文本有沒有修改

if (newtxt != txt) {

td.html(newtxt);

//不需要使用數(shù)據(jù)庫的這段可以不需要

//var Order_Id = $("#ID_Order").text();

var updateCol = $.trim(td.prev().attr("id"));//我重點(diǎn)要說的是著一句：td.prev();表示本td的上一個(gè)td。這句代碼的意思是你所點(diǎn)擊的td的上一個(gè)td的id(如果不明白可以看前面的03.aspx頁面)。

//ajax異步更改數(shù)據(jù)庫,加參數(shù)date是解決緩存問題

url = "../test/03.ashx?caname=" + newtxt + "&updateCol=" + updateCol + "&date=" + new Date();

//使用get()方法打開一個(gè)一般處理程序，data接受返回的參數(shù)(在一般處理程序中返回參數(shù)的方法 context.Response.Write("要返回的參數(shù)");)

//數(shù)據(jù)庫的修改就在一般處理程序中完成

$.get(url, function (data) {

// if (data == "1") {

// alert("該類別已存在！");

// td.html(txt);

// return;

// }

// alert(data);

alert("修改成功");

td.html(newtxt);

});

這是一般處理程序頁面 03.ashx

using System;

using System.Web;

using System.Data.SqlClient;

public class _03 : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

int OrderId = 5;

string newOrderName = context.Request.QueryString["caname"];//獲取用戶修改后的文字

string updateCol = context.Request.QueryString["updateCol"];//獲取用戶修改的本td的上一個(gè)td的id的值(這個(gè)id與數(shù)據(jù)庫中的列名相同)

string sql = "update eoPrintOrder set " + updateCol + " =@name where 通過這一條sql語句，就可以對(duì)數(shù)據(jù)庫進(jìn)行修改 SqlParameter[] pams = {

new SqlParameter("@name",newOrderName),

new SqlParameter("@id",OrderId)

};

string data = DscySFL.DbHelp.ExecuteCommand(sql,pams ).ToString();

context.Response.Write(data);

}

public bool IsReusable {

get {

return false;

}

}

}

總結(jié)

以上是生活随笔為你收集整理的结合前段修改mysql表数据_jquery实现点击文字可编辑并修改保存至数据库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。