Use Jquery to realize that clicking text turns into a text box and can be modified_jquery

Use Jquery to realize the effect of clicking text into a text box, and you can modify the text in the text box.

1. Click the text to turn it into a text box
2. The text box automatically selects all the text
3. Modify the content of the text box
4. Click outside the text box and the text box is opened again Change to the modified text
5. Synchronously update the SQL database content

Html part of the code

Copy code The code is as follows:

< /tr>






< ;td>2

< td>Delete

ID	Name	Operation
1	Haha< ;/b>	Delete
Haha
3< /td>	Haha	Delete< /td>

Create a new edit.js file with the following code

Copy code The code is as follows:

$(function() {
//Get the element with class caname
$(".caname" ).click(function() {
var td = $(this);
var txt = td.text();
var input = $("");
td.html(input);
input.click(function() { return false; });
//Get focus
input. trigger("focus");
//After the text box loses focus, submit the content and change it to text again
input.blur(function() {
var newtxt = $(this).val();
//Determine whether the text has been modified
if (newtxt != txt) {
td.html(newtxt);
/*
* This paragraph does not require the use of a database.
var caid = $.trim(td.prev().text());
//ajax changes the database asynchronously, adding the parameter date is to solve the cache problem
var url = "../common/ Handler2.ashx?caname=" newtxt "&caid=" caid "&date=" new Date();
//Use the get() method to open a general handler, and data accepts the returned parameters (returned in the general handler Parameter method context.Response.Write("Parameter to be returned");)
//The modification of the database is completed in the general handler
$.get(url, function(data) {
if(data=="1")
{
alert("This category already exists! ");
td.html(txt);
return;
}
alert(data);
td.html(newtxt);
});
* /
}
else
{
td.html(newtxt);
}
});
});
});

The Html header refers to the jq class library file and the edit.js file written by yourself, pay attention to the order

Copy code code As follows: