jQuery - Skoncentruj się na TR

Question

Dobra, więc robię wtyczkę, aby umożliwić wbudowaną edycję tabel na mojej stronie, jak dotąd świetnie się spisałem, większość już mam, ale nie mogę się dostać Skupianie się na stole w prawo. Jeśli więc ktoś zakończy edycję i rozpocznie edycję nowego wiersza lub po prostu kliknie poza wiersz, powinien zapisać i wrócić do normalnego stanu. Ale jeśli używam rozmycia w wierszu, nie ma odpowiedzi, ale jeśli używam rozmycia na elemencie, wyzwala się, gdy ludzie zamieniają się z jednego elementu na inny, ale jeśli użyję fokusu w rzędzie, to on uruchamia się, ilekroć ktoś odejdzie element również, nawet jeśli klikną w tym samym wierszu. Nie ma też nic pod zmienną zdarzenia, która mówi mi, na który element ustawia fokus, więc nie mogę porównać z bieżącym wierszem, aby sprawdzić, czy po prostu klikają w wierszu.

Zastanawiam się, czy można go zapisać na Enter/Mouse Kliknij przycisk Zapisz/Rozpocznij edycję kolejnego wiersza, ale wolałbym, aby to działało, ponieważ wydaje się, że jest to o wiele lepsza metoda robienia tego. Myślisz, że ktoś? Proszę?

Answer 1

chciałbym obsłużyć żądania przez wiązania obsługi kliknij dla całego dokumentu, a następnie dodanie stopPropagation() wywołanie w moich innych zdarzeń kliknięcia. Mam ustawić skrzypce wykazać: http://jsfiddle.net/NwftK/

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

I 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

Problem polega na tym, że nawet jeśli masz elementy zagnieżdżone, focus skupi się na elemencie nadrzędnym, gdy skoncentrujesz się na jednym z elementów podrzędnych. Rozwiązaniem, które przychodzi mi na myśl, jest śledzenie bieżącego wiersza za pomocą zmiennej. Kod pseudo może działać mniej więcej tak:

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

Są 2 przypadki, gdzie trzeba wykryć, kiedy rząd traci fokus, jeden, gdy jesteś w środku tabeli i dwa, kiedy wyjdziesz ze stołu.

Można spróbować czegoś takiego:

//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(); 
    }; 
})