html部分
<Td><?php echo $row['bigclassid']?></Td>
<td height="25" width="241" class="bigclassname"><?php echo $row['bigclassname']?></a></td>
Js部分
<script>
/**//*
* 說(shuō)明：用Jquery的方法，無(wú)刷新頁(yè)面，編輯表格
*/

$(function() {
//給頁(yè)面中有bigclassname類的標(biāo)簽上加上click函數(shù)
$(".bigclassname").click(function() {

var objTD = $(this);

//先將老的類別名稱保存起來(lái),并用trim方法去掉左右多余的空格
var oldText = $.trim(objTD.text());

//構(gòu)造一個(gè)input的標(biāo)簽對(duì)象（作用是為了讓這個(gè)input失效，不然點(diǎn)擊多次后，文字會(huì)消失）
var input = $("<input type='text' value='" + oldText + "' />");

//當(dāng)前td的內(nèi)容變?yōu)槲谋究?#xff0c;并且把老類別名放進(jìn)去
objTD.html(input);

//設(shè)置文本框的點(diǎn)擊事件失效
input.click(function() {
return false;
});

//設(shè)置文本框樣式，讓界面顯示的人性化點(diǎn)
input.css("font-size", "16px");
input.css("text-align", "center");
input.css("background-color", "#ffffff");
input.width("120px");

//自動(dòng)選中文本框中的文字
input.select();

//文本框失去焦點(diǎn)時(shí)重新變?yōu)槲谋?
input.blur(function() {

//獲得新輸入的類別名
var newText = $(this).val();

//用新的類別名文字替換之前變過(guò)來(lái)的輸入框狀態(tài)
objTD.html(newText);

//獲取該類別名所對(duì)應(yīng)的ID(bigclassid)
var bigclassid = objTD.prev().text();

//將新的類別名進(jìn)行轉(zhuǎn)碼，不然界面以及數(shù)據(jù)庫(kù)顯示的都是"???"這樣的亂碼
newText = escape(newText);

//獲取要傳到"一般處理文件"(update_bigclassname_2.php)中的URL
var url = "update_bigclassname_2.php?bigclassid=" + bigclassid + "&bigclassname=" + newText;

//AJAX異步更改數(shù)據(jù)庫(kù),data為成功后的回調(diào)返回值，用于顯示提示信息
$.get(url, function(data) { alert(data) });

});
});
});
</script>
更新數(shù)據(jù)庫(kù)的過(guò)程就是普通的php程序
本例要用到j(luò)query請(qǐng)自行下載后調(diào)試

原文地址:http://www.corange.cn/archives/2010/04/3576.html

轉(zhuǎn)載于:https://www.cnblogs.com/zerogo/archive/2010/04/12/2209082.html

總結(jié)

以上是生活随笔為你收集整理的Jquery php 点击td变成input，修改后失去焦点发送数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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