Click Edit JS to make text text box

Imitate the QQ space layout, in order to simulate the friend Group editing section, a lot of collection of JS code, after multiple comparisons and modifications, and finally refined to the more practical script I have encountered so far, which I like the advantages: No ID definition, only define the class can,, code is simple, especially for the background, because, Friends have been successfully used in the background interaction, the first to provide code, make a mark (PS: Forget where to download the JS source, but very grateful to the author of the Great God ...) Thank... ）

<script>
$ (function () {
Gets the element that is class CAName
$ (". T2"). Click (function () {
var td = $ (". T1");
var txt = td.text ();
var input = $ ("<input type= ' text ' value= '" + txt + "'/>");
td.html (input);
Input.click (function () {return false;});
Get focus
Input.trigger ("Focus");
The text box loses focus, commits the content, and becomes text again
Input.blur (function () {
var newtxt = $ (this). Val ();
Determine if the text has been modified
if (newtxt! = txt) {
Td.html (Newtxt);
/*
* This section of the database does not need to be used
var caid = $.trim (Td.prev (). text ());
Ajax asynchronously changes the database, plus the parameter date is to solve the cache problem
var url = ".. /common/handler2.ashx?caname= "+ newtxt +" &caid= "+ CAID +" &date= "+ new Date ();
Using the Get () method to open a generic handler, data accepts the returned parameter (the method that returns the parameter in the generic handler context. Response.Write ("Parameters to return");)
Database modification is done in a generic handler
$.get (URL, function (data) {
if (data== "1")
{
Alert ("The category already exists!") ");
td.html (TXT);
Return
}
alert (data);
Td.html (Newtxt);
});
*/
}
Else
{
Td.html (Newtxt);
}
});
});
});

/*
document.getElementById ("Click1"). Onclick=function () {
var Text=document.getelementbyid ("T1");
var val=text.innerhtml;
Text.innerhtml= "<input type= ' text ' id= ' m ' value=" +val+ "/>";
document.getElementById ("M"). AddEventListener ("Blur", function (e) {
Text.innerhtml=document.getelementbyid ("M"). Value;
});
};
*/
</script>

The body part, does not make the CSS definition, the effect can realize:

<span class= "T1" > Default grouping </span>

<a class= "T2" > Edit </a>

<p> Description: Click Edit to modify the default grouped text content </p>

Load a jquery plugin arbitrarily