使用Jquery實(shí)現(xiàn)點(diǎn)擊文字后變成文本框且可修改
更新時(shí)間：2013年09月21日 11:35:40 作者：
使用Jquery實(shí)現(xiàn)點(diǎn)擊文字變?yōu)槲谋究蛐Ч?，可?duì)文本框文字進(jìn)行修改，具體的實(shí)現(xiàn)思路如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
使用Jquery實(shí)現(xiàn)點(diǎn)擊文字變?yōu)槲谋究蛐Ч?，可?duì)文本框文字進(jìn)行修改。
1.點(diǎn)擊文字變?yōu)槲谋究?
2.文本框自動(dòng)全選文字
3.對(duì)文本框內(nèi)容進(jìn)行修改
4.點(diǎn)擊文本框以外的地方文本框再次變?yōu)樾薷暮蟮奈淖?
5.同步更新SQL數(shù)據(jù)庫(kù)內(nèi)容
Html部分代碼
<table width="200">
<tr>
<td><b>ID</b></td>
<td><b>名稱(chēng)</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文件，代碼如下
$(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();
//判斷文本有沒(méi)有修改
if (newtxt != txt) {
td.html(newtxt);
/*
*不需要使用數(shù)據(jù)庫(kù)的這段可以不需要
var caid = $.trim(td.prev().text());
//ajax異步更改數(shù)據(jù)庫(kù),加參數(shù)date是解決緩存問(wèn)題
var url = "../common/Handler2.ashx?caname=" + newtxt + "&caid=" + caid + "&date=" + new Date();
//使用get()方法打開(kāi)一個(gè)一般處理程序，data接受返回的參數(shù)（在一般處理程序中返回參數(shù)的方法 context.Response.Write("要返回的參數(shù)");）
//數(shù)據(jù)庫(kù)的修改就在一般處理程序中完成
$.get(url, function(data) {
if(data=="1")
{
alert("該類(lèi)別已存在！");
td.html(txt);
return;
}
alert(data);
td.html(newtxt);
});
*/
}
else
{
td.html(newtxt);
}
});
});
});
Html頭部引用jq類(lèi)庫(kù)文件和自己寫(xiě)的edit.js文件，注意順序
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/edit.js" type="text/javascript"></script>
1.點(diǎn)擊文字變?yōu)槲谋究?
2.文本框自動(dòng)全選文字
3.對(duì)文本框內(nèi)容進(jìn)行修改
4.點(diǎn)擊文本框以外的地方文本框再次變?yōu)樾薷暮蟮奈淖?
5.同步更新SQL數(shù)據(jù)庫(kù)內(nèi)容
Html部分代碼
復(fù)制代碼 代碼如下:
<table width="200">
<tr>
<td><b>ID</b></td>
<td><b>名稱(chēng)</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();
//判斷文本有沒(méi)有修改
if (newtxt != txt) {
td.html(newtxt);
/*
*不需要使用數(shù)據(jù)庫(kù)的這段可以不需要
var caid = $.trim(td.prev().text());
//ajax異步更改數(shù)據(jù)庫(kù),加參數(shù)date是解決緩存問(wèn)題
var url = "../common/Handler2.ashx?caname=" + newtxt + "&caid=" + caid + "&date=" + new Date();
//使用get()方法打開(kāi)一個(gè)一般處理程序，data接受返回的參數(shù)（在一般處理程序中返回參數(shù)的方法 context.Response.Write("要返回的參數(shù)");）
//數(shù)據(jù)庫(kù)的修改就在一般處理程序中完成
$.get(url, function(data) {
if(data=="1")
{
alert("該類(lèi)別已存在！");
td.html(txt);
return;
}
alert(data);
td.html(newtxt);
});
*/
}
else
{
td.html(newtxt);
}
});
});
});
Html頭部引用jq類(lèi)庫(kù)文件和自己寫(xiě)的edit.js文件，注意順序
復(fù)制代碼 代碼如下:
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/edit.js" type="text/javascript"></script>
您可能感興趣的文章:
- 比較不錯(cuò)的JS/JQuery顯示或隱藏文本的方法
- 基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本
- Jquery 高亮顯示文本中重要的關(guān)鍵字
- 前端html中jQuery實(shí)現(xiàn)對(duì)文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來(lái)
- JQuery文本框高亮顯示插件代碼
- jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- jQuery獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法
- jQuery取得設(shè)置清空select選擇的文本與值
- jQuery實(shí)現(xiàn)文本顯示一段時(shí)間后隱藏的方法分析
相關(guān)文章
jQuery 隔行換色 支持鍵盤(pán)上下鍵，按Enter選定值
jQuery 隔行換色 支持鍵盤(pán)上下鍵，按Enter選定值2009-08-08
jQuery.ajax 跨域請(qǐng)求webapi設(shè)置headers的解決方案
需要通過(guò)服務(wù)器端設(shè)置響應(yīng)頭、正確響應(yīng)options請(qǐng)求，正確設(shè)置 JavaScript端需要設(shè)置的headers信息方能實(shí)現(xiàn)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)站banner圖片無(wú)縫輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)圖片定時(shí)輪播切換相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
jQuery 核心函數(shù)以及jQuery對(duì)象
首先介紹 jQuery 的幾個(gè)核心函數(shù)，在 jQuery 中它們起著至關(guān)重要的作用，在實(shí)際的前端開(kāi)發(fā)過(guò)程中用到最多的也是它們。2010-03-03
jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
這篇文章主要介紹了jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法,涉及jQuery針對(duì)頁(yè)面元素的操作技巧,需要的朋友可以參考下2015-06-06
jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖的核心代碼，有需要的小伙伴可以參考下2015-04-04
操作下拉列表框的jquery代碼，方便學(xué)習(xí)jquery的朋友。2010-02-02
jQuery EasyUI的TreeGrid查詢功能實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery EasyUI的TreeGrid查詢功能實(shí)現(xiàn)方法,需要的朋友可以參考下2017-08-08
使用jquery的cookie實(shí)現(xiàn)登錄頁(yè)記住用戶名和密碼的方法
今天小編就為大家分享一篇關(guān)于使用jquery的cookie實(shí)現(xiàn)登錄頁(yè)記住用戶名和密碼的方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-03-03
利用JQuery和Servlet實(shí)現(xiàn)跨域提交請(qǐng)求示例分享
這篇文章主要介紹了利用JQuery和Servlet實(shí)現(xiàn)跨域提交請(qǐng)求示例,需要的朋友可以參考下2014-02-02