jquery 应用代码方便的排序功能-工具盒子

终极目的：想做一个方便的排序功能。
具体实现：点击后可以输入排序的数字编号，移开后自动更新数据库。

1，我想把这个功能用来完成，也就需要一个在页面上监控指定的span的东西，他就是：
ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
// 在这里写你的代码...
});
2，页面上很多，如何才能区分呢？用id？还是class？id太单一，于是用class，因为排序不是针对一条数据，而是多条。
3 2 1 0

3，绑定的事件我想肯定是click
$(document).ready(function(){ $(".BY").click(function() { alert('测试下先'); }); }); 
4，然后要让span变成一个输入框才行，go
++复制代码++ 代码如下:

$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class=\"OnBY\" type=\"text\" value=\"" + old + "\"/>");
});
});

5，这时发现了一个问题，无法点击的。点了之后数字没了。因此就无法输入更改了。想个什么办法呢？还记得自动获取选择么？
++复制代码++ 代码如下:

6，很简单的可以更改了。不过当鼠标移开的时候，不能变回去了。郁闷，咋整？
++复制代码++ 代码如下:

用失去焦点函数，把html代码替换回来就是。换回来的还是修改的值。
7，不过不能更数据库交涉，接下来就要用到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参数提交给Admin_BY.aspx处理，后台的处理我就不多说了。用Requst.QueryString来获取。
8，再改进一下，排序肯定要指定一个数据ID

3 
2 
1 
0

++复制代码++ 代码如下:

$(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("发生错误： " + msg);
o.html(old);
}
}
});
});
});
});