JQuery - focus on TR

Question

Ok, so I am creating a plugin to allow in-line editing of tables on my website, so far so good, I have most of it, but I can’t get Focusing to exit the table correctly, therefore, if someone finished editing and starts edit a new line or just clicks from a line, it should save and return to normal operation. But if I use blur in the line, there is no answer, but if I use blur in the element, it starts when people change from one element to another.

But if I use focus on the line, it starts whenever someone leaves the item, even if it clicks on the same line. There is also nothing under the event variable that tells me which element it focuses on, so I cannot compare with the current row to see if they just clicked on the row.

I am thinking about saving on Enter / Mouse. Click the Save / Start Editing Another Line button, but I would prefer it to work, as this seems to be a much better way to do this. Has anyone thought? You are welcome?

Answer 1

, , stopPropagation() . , : http://jsfiddle.net/NwftK/

<table border="1" width="200">
    <tr id="myRow"><td>Hello</td><td>World</td></tr>
</table>

jQuery:

$(function () {
    $("#myRow").on('click', function (e) {
       $(this).css('background-color', 'blue');
        e.stopPropagation();
    }); 

    $(document).on('click', function () {

       $("#myRow").css('background-color', 'red');
    });

});

Answer 2

, , , . , , . :

var row = '';
$(table_element).click(function() { 
                           focused_row = $(this).parent();
                           if(row != '' && focused_row != row) {
                               //code to save edits, user clicked different row
                           }
                           row = focused_row;
                       });

Answer 3

, , , , , , .

- :

//store the last visited row
var row = false;

// save the row if has changed
function save () {
    if (row.changed){
        console.log("save");
    }
}

// keep track of the row you are in
// it doesnt work when you leave the table
$("tr").on("focusin", function (e) {
    if (row != this){
        if (row){
            save();
        }
        row = this;
        e.stopPropagation();
    }
});

//keep track whenever the row changes
$("tr").on("change", function (e) {
    this.changed = true;
    console.log("changed");
})

//triggers when you leave the table, you can try to save changes then.
$(document).on("focusin", function (e) {
    var el = $(e.target); //input or element that triggers this event
    var elrow = el.parent().parent()[0]; // try to get the row from that input, ... if its an input
    if (row && row !=elrow) {
        save();
        e.stopPropagation();
    };
})