Use jquery to implement editable tables and submit them to the server to modify data using Ajax.

Use jquery to implement editable tables and submit them to the server to modify data using Ajax.

 

Below is the JS Code:

$ (Function () {// equivalent to adding an onload event to the body tag of the page
$ (". Caname"). Click (function () {// Add the click function to the tag with the caname class on the page
VaR objtd = $ (this );
VaR oldtext = $. Trim (objtd. Text (); // save the old category name
VaR input = $ ("<input type = 'text' value = '" + oldtext + "'/>"); // The HTML of the text box Code
Objtd.html (input); // the content of the current TD is changed to a text box.
// Set the Click Event of the text box to invalid
Input. Click (function (){
Return false;
});
// Set the text box style
Input.css ("border-width", "0px"); // The border is 0.
Input. Height (objtd. Height (); // The height of the text box is the height of the current TD Cell
Input. Width (objtd. Width (); // The width is the width of the current TD cell.
Input.css ("font-size", "14px"); // The text size of the text box is 14px.
Input.css ("text-align", "center"); // center the text
Input. Trigger ("Focus"). Trigger ("select"); // select all

// When the text box loses focus, it becomes text again
Input. Blur (function (){
VaR newtext = $ (this). Val (); // The modified name.
VaR input_blur = $ (this );

// Submit data only when the old category name is different from the modified one
If (oldtext! = Newtext ){
// Obtain the ID (serial number) corresponding to the class alias)
VaR caid = $. Trim (objtd. Prev (). Text ());
// Modify the database asynchronously using Ajax
VaR url = "../handler/changecaname. ashx? Caname = "+ encodeuri (newtext) +" & caid = "+ caid +" & t = "+ new date (). gettime ();
$. Get (URL, function (data ){
If (Data = "false "){
$ ("# Test"). Text ("category modification failed. Please check whether the category name is repeated! ");
Input_blur.trigger ("Focus"). Trigger ("select"); // select all text boxes
} Else {
$ ("# Test"). Text ("");
Objtd.html (newtext );
}
});
} Else {
// The text is consistent before and after, and the text box is changed to a label
Objtd.html (newtext );
}
});

// Press a key in the text box
Input. keydown (function (event ){
VaR jianzhi = event. keycode;
VaR input_keydown = $ (this );

Switch (jianzhi ){
Case 13: // press enter to submit the modified value to the database.
// $ ("# Test"). Text ("the key value you pressed is:" + jianzhi );
VaR newtext = input_keydown.val (); // The modified name.
// Submit data only when the old category name is different from the modified one
If (oldtext! = Newtext ){
// Obtain the ID (serial number) corresponding to the class alias)
VaR caid = $. Trim (objtd. Prev (). Text ());
// Modify the database asynchronously using Ajax
VaR url = "../handler/changecaname. ashx? Caname = "+ encodeuri (newtext) +" & caid = "+ caid +" & t = "+ new date (). gettime ();
$. Get (URL, function (data ){
If (Data = "false "){
$ ("# Test"). Text ("category modification failed. Please check whether the category name is repeated! ");
Input_keydown.trigger ("Focus"). Trigger ("select"); // select all text boxes
} Else {
$ ("# Test"). Text ("");
Objtd.html (newtext );
}
});
} Else {
// The text is consistent before and after, and the text box is changed to a label
Objtd.html (newtext );
}
Break;
Case 27: // Press ESC to cancel the modification and change the text box to a label.
$ ("# Test"). Text ("");
Objtd.html (oldtext );
Break;
}
});

});
});

// Mask the Enter key
$ (Document). keydown (function (event ){
Switch (event. keycode ){
Case 13: Return false;
}
});

Below is the general processingProgramCode changecaname. ashx

<% @ Webhandler Language = "C #" class = "changecaname" %>
Using system;
Using system. Web;
Using BLL;
Using model;

Public class changecaname: ihttphandler
{

Public void processrequest (httpcontext context)
{
Context. response. contenttype = "text/plain ";

String caid = context. Request. querystring ["Caid"];
String caname = context. server. urldecode (context. Request. querystring ["caname"]);
// Determine whether a category with the same name already exists in the Database
If (New categorymanager (). isexists (caname ))
{
Context. response. Write ("false ");
Return;
}
// Change the database category name
Category ca = new category (CAID, caname );
Bool B = new categorymanager (). Update (CA );
If (B)
{
Context. response. Write ("true ");
}
Else
{
Context. response. Write ("false ");
}

}

Public bool isreusable
{
Get
{
Return false;
}
}

}