欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Jquery實(shí)現(xiàn)點(diǎn)擊文字后變成文本框且可修改

 更新時間：2013年09月21日 11:35:40   作者：  
使用Jquery實(shí)現(xiàn)點(diǎn)擊文字變?yōu)槲谋究蛐Ч?，可對文本框文字進(jìn)行修改，具體的實(shí)現(xiàn)思路如下，感興趣的朋友可以參考下，希望對大家有所幫助
使用Jquery實(shí)現(xiàn)點(diǎn)擊文字變?yōu)槲谋究蛐Ч蓪ξ谋究蛭淖诌M(jìn)行修改。

1.點(diǎn)擊文字變?yōu)槲谋究?
2.文本框自動全選文字
3.對文本框內(nèi)容進(jìn)行修改
4.點(diǎn)擊文本框以外的地方文本框再次變?yōu)樾薷暮蟮奈淖?
5.同步更新SQL數(shù)據(jù)庫內(nèi)容

Html部分代碼
復(fù)制代碼 代碼如下:

<table width="200">
<tr>
<td><b>ID</b></td>
<td><b>名稱</b></td>
<td><b>操作</b></td>
</tr>
<tr>
<td><b>1</b></td>
<td class="caname"><b>哈哈</b></td>
<td><b>刪除</b></td>
</tr>
<tr>
<td><b>2</b></td>
<td class="caname"><b>哈哈</b></td>
<td><b>刪除</b></td>
</tr>
<tr>
<td><b>3</b></td>
<td class="caname"><b>哈哈</b></td>
<td><b>刪除</b></td>
</tr>
</table>

新建edit.js文件，代碼如下
復(fù)制代碼 代碼如下:

$(function() {
//獲取class為caname的元素
$(".caname").click(function() {
var td = $(this);
var txt = td.text();
var input = $("<input type='text'value='" + txt + "'/>");
td.html(input);
input.click(function() { return false; });
//獲取焦點(diǎn)
input.trigger("focus");
//文本框失去焦點(diǎn)后提交內(nèi)容，重新變?yōu)槲谋?
input.blur(function() {
var newtxt = $(this).val();
//判斷文本有沒有修改
if (newtxt != txt) {
td.html(newtxt);
/*
*不需要使用數(shù)據(jù)庫的這段可以不需要
var caid = $.trim(td.prev().text());
//ajax異步更改數(shù)據(jù)庫,加參數(shù)date是解決緩存問題
var url = "../common/Handler2.ashx?caname=" + newtxt + "&caid=" + caid + "&date=" + new Date();
//使用get()方法打開一個一般處理程序，data接受返回的參數(shù)（在一般處理程序中返回參數(shù)的方法 context.Response.Write("要返回的參數(shù)");）
//數(shù)據(jù)庫的修改就在一般處理程序中完成
$.get(url, function(data) {
if(data=="1")
{
alert("該類別已存在！");
td.html(txt);
return;
}
alert(data);
td.html(newtxt);
});
*/
}
else
{
td.html(newtxt);
}
});
});
});

Html頭部引用jq類庫文件和自己寫的edit.js文件，注意順序
復(fù)制代碼 代碼如下:

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/edit.js" type="text/javascript"></script>

相關(guān)文章

最新評論