Use jquery to implement editable tables and submit them to the server with Ajax to modify data _jquery

here is the JS Code:

Copy Code code as follows:

$ (function () {//equivalent to the body tag in the page plus the OnLoad event
$ (". CAName"). Click (function () {//) Add the click Function to the label of 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 + "'/>"); HTML code for text boxes
objtd.html (input); Current TD's content becomes text box
Set the Click event for the text box to fail
Input.click (function () {
return false;
});
Set the style of a text box
Input.css ("Border-width", "0px"); 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 ()); Width is the width of the current TD cell
Input.css ("Font-size", "14px"); text box has a content text size of 14px
Input.css ("Text-align", "center"); Center text
Input.trigger ("Focus"). Trigger ("select"); Select All
Change text back to text when the box loses focus
Input.blur (function () {
var NewText = $ (this). Val (); The modified name
var Input_blur = $ (this);
Data submission is done when the old category name differs from the modified name
if (OldText!= newtext) {
Gets the ID (ordinal number) of the class alias
var caid = $.trim (Objtd.prev (). text ());
Ajax asynchronously changes the database
var url = ".. /handler/changecaname.ashx?caname= "+ encodeURI (encodeURI (NewText)) +" &caid= "+ CAID +" &t= "+ New Date (). GetTim E ();
$.get (URL, function (data) {
if (data = = "false") {
$ ("#test"). Text ("Category modification failed, please check if category name duplicates!");
Input_blur.trigger ("Focus"). Trigger ("select"); text box Select all
} else {
$ ("#test"). Text ("");
Objtd.html (NewText);
}
});
} else {
Consistent text before and after the text box into a label
Objtd.html (NewText);
}
});
Press the keyboard 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 ("You press the key value is:" + Jianzhi);
var NewText = Input_keydown.val (); The modified name
Data submission is done when the old category name differs from the modified name
if (OldText!= newtext) {
Gets the ID (ordinal number) of the class alias
var caid = $.trim (Objtd.prev (). text ());
Ajax asynchronously changes the database
var url = ".. /handler/changecaname.ashx?caname= "+ encodeURI (encodeURI (NewText)) +" &caid= "+ CAID +" &t= "+ New Date (). GetTim E ();
$.get (URL, function (data) {
if (data = = "false") {
$ ("#test"). Text ("Category modification failed, please check if category name duplicates!");
Input_keydown.trigger ("Focus"). Trigger ("select"); text box Select all
} else {
$ ("#test"). Text ("");
Objtd.html (NewText);
}
});
} else {
Consistent text before and after the text box into a label
Objtd.html (NewText);
}
Break
Case 27://Press ESC to cancel the change and turn the text box into a label
$ ("#test"). Text ("");
Objtd.html (OldText);
Break
}
});
});
});

Mask Enter key
$ (document). KeyDown (function (event) {
Switch (event.keycode) {
Case 13:return false;
}
});

here is the generic handler code CHANGECANAME.ASHX

Copy Code code as follows:

<%@ 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"]);
To determine if a category with the same name already exists in the database
if (new Categorymanager (). Isexists (CAName))
{
Context. Response.Write ("false");
Return
}
Change Database class Alias
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;
}
}
}