jQuery - Céntrese en TR

Question

Bien, entonces estoy haciendo un complemento para permitir la edición en línea de tablas en mi sitio web, yendo bien hasta ahora, lo he hecho casi todo, pero parece que no puedo obtener Se está enfocando fuera de la mesa. Entonces, si alguien termina de editar y comienza a editar una nueva fila o simplemente hace clic fuera de la fila, debe guardar y volver a la normalidad. Pero si uso blur en la fila, no hay respuesta, pero si uso blur en el elemento, se activa cuando las personas cambian de un elemento a otro

Pero si uso el enfoque en la fila, se dispara cada vez que alguien se va el elemento también, incluso si hacen clic en la misma fila. Tampoco hay nada debajo de la variable de evento que me diga en qué elemento está centrando la atención, por lo que no puedo comparar con la fila actual para ver si solo están haciendo clic en la fila.

Estoy pensando en guardarlo en Enter/Mouse Haga clic en un botón Guardar/Comenzar a editar otra fila, pero prefiero que esto funcione, ya que parece ser un método mucho mejor para hacerlo. ¿Alguien pensó? ¿Por favor?

Answer 1

que se ocuparía de su solicitud mediante la unión de un controlador de clic para todo el documento, y luego añadir una llamada stopPropagation() dentro de mis otros eventos de clic. He fijado un violín para demostrar: http://jsfiddle.net/NwftK/

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

Y el 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

El problema es que, incluso si tiene elementos anidados, el enfoque se activará en el elemento principal cuando se enfoque en uno de los elementos secundarios. Una solución que puedo pensar sería hacer un seguimiento de la fila actual usando una variable. El pseudo código podría funcionar algo como esto:

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

Hay 2 casos en que es necesario para detectar cuando la fila pierde el foco, Uno mientras se encuentra dentro de la tabla y dos cuando sales de la mesa.

Usted puede intentar algo como esto:

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