Home > Web Front-end > JS Tutorial > jQuery (non-HTML5) editable table implementation code_jquery

jQuery (non-HTML5) editable table implementation code_jquery

WBOY
Release: 2016-05-16 17:46:53
Original
1131 people have browsed it
Function:
Click a cell to select it. Use the arrow keys to change the selected cell during the selection process. Press the Enter key or directly double-click the cell to enter the editable state during the selection process. The cell loses focus. Save the modified content.

Main implementation ideas:
Selecting, moving the selected area, etc. are all implemented by relying on the powerful API of jQuery. The editable cell actually adds an input field to the cell when the cell is selected, and dynamically updates the data

Source code:
HTML code:
Copy code The code is as follows:





















/table>


CSS code:



Copy 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:#66CCFF;
cursor:pointer;
}
.selectCell{
background:#6699FF;
}


JS code:



Copy code
The code is as follows:

var EdTable = function(){
// Bind events to cells
function initBindGridEvent(){
$("td.editable").unbind();
// Add cell click event
addGridClickEvent();
// Add cell double-click event
addGridDbClickEvent();
// Add keyboard event
addGridKeyPressEvent();
}
// Add a click event to the cell
function addGridClickEvent(){
$("td.simpleInput").bind("click",function(){
$('. simpleInput').each(function(){
$(this).removeClass("selectCell");
});
// Add a selection 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 = $(this).css("width");
var height = $(this).css("height");
$(this).html("");
$(this).children("input").select();
});
}
// to the cell Add keyboard event
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 key
var selectCell = $(".selectCell")[0];
if(selectCell != undefined){
$(selectCell) .dblclick();
}
}
});
}
// Save table information after the 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
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Item1 Item2 Item3
arthinking Jason itzhai
arthinking Jason itzhai
arthinking Jason itzhai