JQuery (non-HTML5) editable table implementation code

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:Copy codeThe Code is as follows: <table class = "editableTable">
<Thead>
<Tr>
<Th> Item1 </th>
<Th> Item2 </th>
<Th> Item3 </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td class = "editable simpleInput"> Arthur King </td>
<Td class = "editable simpleInput"> Jason </td>
<Td class = "editable simpleInput"> itzhai </td>
</Tr>
<Tr>
<Td class = "editable simpleInput"> Arthur King </td>
<Td class = "editable simpleInput"> Jason </td>
<Td class = "editable simpleInput"> itzhai </td>
</Tr>
<Tr>
<Td class = "editable simpleInput"> Arthur King </td>
<Td class = "editable simpleInput"> Jason </td>
<Td class = "editable simpleInput"> itzhai </td>
</Tr>
</Tbody>
</Table>

CSS code:Copy codeThe 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:Copy codeThe 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 (thisdomain.html ("<input type = 'text' onblur = 'edtable. saveEdit (this) 'style = 'width: "+ width +"; height: "+ height +"; padding: 0px; margin: 0px; 'value = '"+ val +"'> ");
$ (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