Use jquery to implement the click Text into a text box effect, you can modify the text box text.
1. Click Text into text box
2. text box auto-select text
3. Modify the contents of the text box
4. Click outside the text box to change the text box again into the modified text
5. Synchronize updates to SQL database content
HTML Part Code
Copy Code code as follows:
<table width= ">"
<tr>
<td><b>ID</b></td>
<td><b> name </b></td>
<td><b> Operations </b></td>
</tr>
<tr>
<td><b>1</b></td>
<TD class= "CAName" ><b> haha </b></td>
<td><b> Delete </b></td>
</tr>
<tr>
<td><b>2</b></td>
<TD class= "CAName" ><b> haha </b></td>
<td><b> Delete </b></td>
</tr>
<tr>
<td><b>3</b></td>
<TD class= "CAName" ><b> haha </b></td>
<td><b> Delete </b></td>
</tr>
</table>
Create a new Edit.js file with the following code
Copy Code code as follows:
$ (function () {
Gets the element with class CAName
$ (". CAName"). Click (function () {
var td = $ (this);
var txt = td.text ();
var input = $ ("<input type= ' text ' value= '" + txt + "'/>");
td.html (input);
Input.click (function () {return false;});
Get focus
Input.trigger ("Focus");
text box submits content after losing focus, and changes to text again
Input.blur (function () {
var newtxt = $ (this). Val ();
Determine if the text has been modified
if (newtxt!= txt) {
Td.html (Newtxt);
/*
* Do not need to use the database of this section can not need
var caid = $.trim (Td.prev (). text ());
Ajax asynchronously changes the database, plus the parameter date is the solution to the cache problem
var url = ".. /common/handler2.ashx?caname= "+ newtxt +" &caid= "+ CAID +" &date= "+ new Date ();
Use the Get () method to open a generic handler that data accepts the returned parameter (the method context in which the parameter is returned in a generic handler). Response.Write ("Parameters to return");
Database modifications are done 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);
}
});
});
});
HTML headers refer to JQ class library files and their own written edit.js files, note the order
Copy Code code as follows:
<script src= ". /js/jquery.js "type=" Text/javascript "></script>
<script src= ". /js/edit.js "type=" Text/javascript "></script>
