jQuery (non-HTML5) editable table implementation code

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：

editable sheet

source：php.cn

Previous article：Use jquery to change the background color of the click column_jquery Next article：Manipulating the parent window object in JavaScript child window ModalDialog_Basic knowledge

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