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

Source: Internet
Author: User
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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.