The following function gets the lastly clicked cell value and pastes it into the edit box editBox
, in which the user can then edit the value. Whenever the user goes out of the editing box the value is copy/pasted back to the cell. Aside from that functionality, the cell that's focused gets overlighted (red color).
I've noticed that sometimes when a value is too large (big number of lines), the copy-paste thingy takes longer than expected : it should be almost live ( <1s ) but actually takes 3-5s.
--- EDIT : JsFiddle added ---
https://jsfiddle.net/k3nj33nu/5/
---------------------------------------
Any suggested performance improvements?
$(document).ready(function() {
var lastClicked;
$(document).on('click', '.cell', function() {
$('.editBox').val($(this).val());
if (lastClicked != undefined && lastClicked != $(this).attr('name'))
{
var lastCell = $(document).find("[name='" + lastClicked + "']");
var newCell = $(this);
ChangeCellBorderColor(lastCell, "");
ChangeCellBorderColor(newCell, "red");
}
lastClicked = $(this).attr('name');
$('.editBox').keyup(function() {
$(document).find("[name='" + lastClicked + "']").val($('.editBox').val())
});
});
});
function ChangeCellBorderColor(cell, colour)
{
cell[0].style.borderColor = colour;
}