Tengo una tabla y escucho el doble clic en una celda de la tabla. Si el usuario hace doble clic en una celda, esa celda se vuelve editable. Estoy buscando cómo revertir el estado de "edición" una vez que el usuario hace clic fuera de la celda (en cualquier otro lugar de la página). El código que tengo hasta ahora funciona para ingresar al modo "editar":
$('table tbody tr td').dblclick(function(){ var cell=$(this) var value=cell.text(); var rowIndex = cell.parent().index('table tbody tr'); var tdIndex = cell.index('table tbody tr:eq('+rowIndex+') td'); //my logic on editing //the event handling if I click outside of that `cell` });El código que extraño debe activarse solo si se está editando una celda, no debe interferir con otros eventos de clic en la página. ¿Cómo puedo lograr esto?
Puede adjuntar un detector de eventos de click al documento que verifica si una de las celdas de la tabla contiene el destino del evento. De lo contrario, sabe que el evento de click no se dirigió hacia la celda de la tabla y puede realizar la lógica para deshabilitar la edición:
const tableCells = $('table tbody tr td') tableCells.dblclick(function() { $(this).attr('contenteditable', 'true').focus(); }); $(document).click(function(e) { if (!tableCells.toArray().some(f => f.contains(e.target))) { tableCells.removeAttr('contenteditable'); } }) td { margin: 10px; padding: 10px; border: 1px solid; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Hello</td> <td>World!</td> </tr> </table>