3
\$\begingroup\$

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;
}
|improve this question
\$\endgroup\$
  • \$\begingroup\$ Move your keyup function outside document on click, you are attaching the listener for every time you click on cell, so you are setting same value a lot of times innecesarily \$\endgroup\$ – juvian Mar 13 '17 at 18:20
  • \$\begingroup\$ Does not really make any difference. thanks though! \$\endgroup\$ – user2567674 Mar 14 '17 at 17:33
  • 1
    \$\begingroup\$ Be careful that with copy paste with mouse won´t trigger the keyup. How large is the value? Can´t be able to replicate your 3 seconds \$\endgroup\$ – juvian Mar 14 '17 at 18:58
  • \$\begingroup\$ Can you please add HTML code too. Some of the JS code may not be required. If possible, please create runnable stack-snippet. \$\endgroup\$ – Tushar Mar 15 '17 at 14:27
  • \$\begingroup\$ JsFiddle added. \$\endgroup\$ – user2567674 Apr 26 '17 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.