jquery 應(yīng)用代碼 方便的排序功能
具體實(shí)現(xiàn):點(diǎn)擊后可以輸入排序的數(shù)字編號(hào),移開(kāi)后自動(dòng)更新數(shù)據(jù)庫(kù)。
1,我想把這個(gè)功能用<span>來(lái)完成,也就需要一個(gè)在頁(yè)面上監(jiān)控指定的span的東西,他就是:
ready(fn)當(dāng)DOM載入就緒可以查詢(xún)及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。
$(document).ready(function(){
// 在這里寫(xiě)你的代碼...
});
2,頁(yè)面上<span>很多,如何才能區(qū)分呢?用id?還是class?id太單一,于是用class,因?yàn)榕判虿皇轻槍?duì)一條數(shù)據(jù),而是多條。
<span class="BY">3</span><br /><BR><span class="BY">2</span><br /><BR><span class="BY">1</span><br /><BR><span class="BY">0</span><br />
3,綁定的事件我想肯定是click
$(document).ready(function(){<BR> $(".BY").click(function() {<BR> alert('測(cè)試下先');<BR> });<BR><BR>}); <BR>
4,然后要讓span變成一個(gè)輸入框才行,go
$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class=\"OnBY\" type=\"text\" value=\"" + old + "\"/>");
});
});
5,這時(shí)發(fā)現(xiàn)了一個(gè) 問(wèn)題,無(wú)法點(diǎn)擊的。點(diǎn)了之后數(shù)字沒(méi)了。因此就無(wú)法輸入更改了。想個(gè)什么辦法呢?還記得自動(dòng)獲取選擇么?
$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>");
});
});
6,很簡(jiǎn)單的可以更改了。不過(guò)當(dāng)鼠標(biāo)移開(kāi)的時(shí)候,不能變回去了。郁悶,咋整?
$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>");
$(".OnBY").blur(function() {
o.html($(".OnBY").val());
});
});
});
用失去焦點(diǎn)函數(shù),把html代碼替換回來(lái)就是。換回來(lái)的還是修改的值。
7,不過(guò) 不能更數(shù)據(jù)庫(kù)交涉,接下來(lái)就要用到ajax??纯?。
$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>");
$(".OnBY").blur(function() {
$.ajax({
type: "GET",
url: "Admin_BY.aspx",
data: "BY=" + $(".OnBY").val(),
success: function(msg) {
alert(msg);
o.html($(".OnBY").val());
}
});
});
});
});
把修改的By參數(shù)提交給Admin_BY.aspx處理,后臺(tái)的處理我就不多說(shuō)了。用Requst.QueryString來(lái)獲取。
8,再改進(jìn)一下,排序肯定要指定一個(gè)數(shù)據(jù)ID
<span class="BY" DbID="3" title="點(diǎn)擊修改">3</span><br />
<span class="BY" DbID="2" title="點(diǎn)擊修改">2</span><br />
<span class="BY" DbID="1" title="點(diǎn)擊修改">1</span><br />
<span class="BY" DbID="0" title="點(diǎn)擊修改">0</span><br />
$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>");
$(".OnBY").blur(function() {
$.ajax({
type: "GET",
url: "Admin_BY.aspx",
data: "ID=" + o.attr("BYID") + "&BY=" + $(".OnBY").val(),
success: function(msg) {
if (msg.indexOf("[BYNOK]")>0) {
o.html($(".OnBY").val());
} else {
alert("發(fā)生錯(cuò)誤: " + msg);
o.html(old);
}
}
});
});
});
});
還有更多想法,等有空再增加上去。比如修改時(shí),數(shù)據(jù)處理有個(gè)時(shí)間,在等待的時(shí)間里,改變下鼠標(biāo)樣式為繁忙等。
或更新后,重新裝載數(shù)據(jù),因?yàn)榫唧w數(shù)據(jù)不同,只能具體應(yīng)用。也或者直接刷新頁(yè)面。
初學(xué)原創(chuàng),請(qǐng)各位高手不吝賜教。
Kas
PS:關(guān)于ERic Poon 兄弟說(shuō)何處用到,抓個(gè)圖參考下吧。

相關(guān)文章
jQuery動(dòng)畫(huà)animate方法使用介紹
用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫(huà)形式及結(jié)果樣式屬性對(duì)象,下面為大家詳細(xì)介紹下animate方法的具體使用,感興趣的朋友可以了解下哈2013-05-05jQuery實(shí)現(xiàn)聯(lián)動(dòng)下拉列表查詢(xún)框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)聯(lián)動(dòng)下拉列表查詢(xún)框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01基于Jquery插件開(kāi)發(fā)之圖片放大鏡效果(仿淘寶)
公司某個(gè)網(wǎng)站,需要實(shí)現(xiàn)圖片預(yù)覽效果,并能像淘寶一樣實(shí)現(xiàn)局部分大,使用jquery的朋友可以參考下。2011-11-11JQuery模板插件 jquery.tmpl 動(dòng)態(tài)ajax擴(kuò)展
在上一篇JQuery模板插件-jquery.tmpl中介紹了這款插件。有時(shí)我們需要去動(dòng)態(tài)的ajax去加載模板,或者數(shù)據(jù),根據(jù)url參數(shù)或者其他信息加載不同的模板,數(shù)據(jù)2011-11-11jQuery實(shí)現(xiàn)最簡(jiǎn)單的切換圖效果【可兼容IE6、火狐、谷歌、opera等】
這篇文章主要介紹了jQuery實(shí)現(xiàn)最簡(jiǎn)單的切換圖效果,可兼容IE6、火狐、谷歌、opera等瀏覽器,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容的方法,實(shí)例分析了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載頁(yè)面的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
jQuery的表格懸停變色 恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox2008-08-08jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法,涉及jQuery方法重載、事件綁定及元素操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12