JQuery (non-HTML5) editable table implementation code _ jquery-js tutorial

Click "cell selection" and use the direction key to change the selected cell. Press the Enter key or double-click the cell to enter the Editable state. When the cell loses focus, save the modified content. Function:
Click "cell selection" and use the direction key to change the selected cell. Press the Enter key or double-click the cell to enter the Editable State during the selection. When the cell loses focus, the modified content is saved.

Main Implementation ideas:
The selection and moving of selected regions are implemented by jQuery's powerful API. The editable cell actually adds an input field to the cell when selecting the cell to dynamically update the data.

Source code:
HTML code:

The Code is as follows:

Item1	Item2	Item3
Arthur King	Jason	Itzhai
Arthur King	Jason	Itzhai
Arthur King	Jason	Itzhai

CSS code:

The Code is as follows:

Body {
Text-shadow: # FFFFFF 1px 1px 1px;
}
. EditableTable {
Width: 220px;
Padding: 10px;
Background-color: # DDEEF6;
Border: 1px solid # DDEEF6;
-Webkit-border-radius: 6px;
-Moz-border-radius: 6px;
}
. EditableTable thead {
Background: # FFFFCC;
}
Td {
Background: #66 CCFF;
Cursor: pointer;
}
. SelectCell {
Background: # 6699FF;
}

JS Code:

The Code is as follows:

Var EdTable = function (){
// Bind an event to a cell
Function initBindGridEvent (){
$ ("Td. editable"). unbind ();
// Add a cell Click Event
AddGridClickEvent ();
// Add a cell double-click event
AddGridDbClickEvent ();
// Add a keyboard event
AddGridKeyPressEvent ();
}
// Add a click event to a cell
Function addGridClickEvent (){
$ ("Td. simpleInput"). bind ("click", function (){
$ ('. Simpleinput'). each (function (){
$ (This). removeClass ("selectCell ");
});
// Add a selected style to the selected Element
$ (This). addClass ("selectCell ");
});
}
// Add a double-click event to the cell
Function addGridDbClickEvent (){
$ ("Td. simpleInput"). bind ("dblclick", function (){
$ ('. Simpleinput'). each (function (){
$ (This). removeClass ("selectCell ");
});
Var val=((this).html ();
Var width = expires (this).css ("width ");
Var height = watermark (this).css ("height ");
Certificate (this).html ("");
$ (This). children ("input"). select ();
});
}
// Add a keyboard event to a cell
Function addGridKeyPressEvent (){
$ (Document). keyup (function (event ){
If (event. keyCode = 37 ){
// Left arrow
Var selectCell = $ (". selectCell"). prev () [0];
If (selectCell! = Undefined ){
$ (". SelectCell"). removeClass ("selectCell"). prev (). addClass ("selectCell ");
}
} Else if (event. keyCode = 38 ){
// Up arrow
Var col = $ (". selectCell"). prevAll (). length;
Var topCell = $ (". selectCell"). parent ("tr"). prev (). children () [col];
If (topCell! = Undefined ){
$ (". SelectCell"). removeClass ("selectCell ");
$ (TopCell). addClass ("selectCell ");
}
} Else if (event. keyCode = 39 ){
// Right arrow
Var selectCell = $ (". selectCell"). next () [0];
If (selectCell! = Undefined ){
$ (". SelectCell"). removeClass ("selectCell"). next (). addClass ("selectCell ");
}
} Else if (event. keyCode = 40 ){
// Down arrow
Var col = $ (". selectCell"). prevAll (). length;
Var topCell = $ (". selectCell"). parent ("tr"). next (). children () [col];
If (topCell! = Undefined ){
$ (". SelectCell"). removeClass ("selectCell ");
$ (TopCell). addClass ("selectCell ");
}
} Else if (event. keyCode = 13 ){
// Enter the Enter key
Var selectCell = $ (". selectCell") [0];
If (selectCell! = Undefined ){
$ (SelectCell). dblclick ();
}
}
});
}
// Save the table information when the cell has no focus
Function saveEdit (gridCell ){
Var pnt = $ (gridCell). parent ();
Certificate (pnt0000.html ($ (gridCell). attr ("value "));
$ (GridCell). remove ();
}
Return {
InitBindGridEvent: initBindGridEvent,
SaveEdit: saveEdit
}
}();

Source code download:
EditableTable.rar