JQuery (not HTML5) editable table implementation code _jquery

function：
Click cell selection to replace the selected cell with the arrow keys in the selection process, press Enter in the selection process, or double-click the cell to enter the editable state, and save the modified content when the cell loses focus.

Main realization Idea：
Select, move the selected area and so on by relying on the jquery powerful API to implement. The editable cells actually add input fields to the cell when the cell is selected, dynamically updating the data

Source Code：
HTML code:

Copy Code code as follows:

<table class= "Editabletable" >
<thead>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
</tr>
</thead>
<tbody>
<tr>
&LT;TD class= "Editable Simpleinput" >arthinking</td>
&LT;TD class= "Editable Simpleinput" >Jason</td>
&LT;TD class= "Editable Simpleinput" >itzhai</td>
</tr>
<tr>
&LT;TD class= "Editable Simpleinput" >arthinking</td>
&LT;TD class= "Editable Simpleinput" >Jason</td>
&LT;TD class= "Editable Simpleinput" >itzhai</td>
</tr>
<tr>
&LT;TD class= "Editable Simpleinput" >arthinking</td>
&LT;TD class= "Editable Simpleinput" >Jason</td>
&LT;TD class= "Editable Simpleinput" >itzhai</td>
</tr>
</tbody>
</table>

CSS code:

Copy Code code 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: #66CCFF;
Cursor:pointer;
}
. selectcell{
Background: #6699FF;
}

JS Code:

Copy Code code as follows:

var edtable = function () {
To bind an event to a cell
function Initbindgridevent () {
$ ("td.editable"). Unbind ();
Add a Cell Click event
Addgridclickevent ();
Add Cell Double-click event
Addgriddbclickevent ();
adding keyboard events
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 a cell
function Addgriddbclickevent () {
$ ("Td.simpleinput"). Bind ("DblClick", function () {
$ ('. Simpleinput '). each (function () {
$ (this). Removeclass ("Selectcell");
});
var val=$ (this). html ();
var width = $ (this). CSS ("width");
var height = $ (this). CSS ("height");
$ (this). HTML ("<input type= ' text ' onblur= ' Edtable.saveedit (this) ' style= ' width:" + width + "; Height:" + height + "; padding:0px; margin:0px ' value= ' "+val+" "' >");
$ (this). Children ("input"). Select ();
});
}
To 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
var Selectcell = $ (". Selectcell") [0];
if (Selectcell!= undefined) {
$ (Selectcell). DblClick ();
}
}
});
}
Save table information when cell loses focus
function Saveedit (Gridcell) {
var pnt=$ (Gridcell). parent ();
$ (PNT). HTML ($ (Gridcell). attr ("value"));
$ (Gridcell). Remove ();
}
return{
Initbindgridevent:initbindgridevent,
Saveedit:saveedit
}
}();

Source code Download：
Editabletable.rar