jquery application code convenient sorting function_jquery

The ultimate goal: I want to make a convenient sorting function.
Specific implementation: After clicking, you can enter the sorted numerical number, and the database will be automatically updated after moving away.

1. I want to use to complete this function. I also need something to monitor the specified span on the page. It is:
ready(fn) when the DOM is loaded. You can bind a function to be executed when querying and manipulating.
$(document).ready(function(){
// Write your code here...
});
2. There are many on the page, how to distinguish them Woolen cloth? Use id? Or class? The id is too single, so I use class because the sorting is not for one piece of data, but for multiple pieces.
3

2
< ;BR>1

0


3. I think the bound event must be click
$(document).ready(function(){
$(".BY").click(function() {< BR> alert('Test first');
});

});

4, and then you need to make span into an input box. go

Copy code The code is as follows:

$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html( "");
});
});

5, At this time, I discovered a problem and couldn't click. After clicking, the numbers disappeared. Therefore, changes cannot be entered. What can you think of? Remember getting the selection automatically?

Copy code The code is as follows:

$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html(" ");
});
});

6, it’s very easy to change. But when the mouse is moved away, it cannot be changed back. I'm depressed, what should I do?

Copy code The code is as follows:

$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html(" ");
$(".OnBY").blur(function () {
o.html($(".OnBY").val());
});
});
});

Just use the lost focus function to replace the html code back. What is returned is the modified value.
7, but the database cannot be updated and ajax will be used next. have a look.

Copy code The code is as follows:

$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html(" ");
$(".OnBY").blur(function () {
$.ajax({
type: "GET",
url: "Admin_BY.aspx",
data: "BY=" $(".OnBY").val( ),
success: function(msg) {
alert(msg);
o.html($(".OnBY").val());
}
});
});
});
});

Submit the modified By parameter to Admin_BY.aspx for processing. I won’t say much about the background processing. Use Requst.QueryString to get it.
8. Improve it again. You must specify a data ID for sorting.

3< br />
2

1

0< /span>

Copy code The code is as follows:

$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("$(".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("An error occurred: " msg) ;
o.html(old);
}
}
});
});
});
});

There are more ideas, I will add them when I have time. For example, when modifying, there is a time for data processing. During the waiting time, change the mouse style to busy, etc.
Or reload the data after updating. Because the specific data is different, it can only be applied specifically. Or refresh the page directly.

If you are a beginner, please give me some advice.
Kas

PS: About ERic Poon, brothers said where to use it, grab a picture for reference.