jQuery — сосредоточьтесь на TR

Итак, я делаю плагин, позволяющий встроенное редактирование таблиц на моем веб-сайте, пока все идет отлично, я сделал большую часть этого, но, похоже, я не могу правильно настроить Focusing из таблицы. Поэтому, если кто-то закончит редактирование и начнет редактировать новую строку или просто щелкнет за пределами строки, он должен сохраниться и вернуться в нормальное состояние. Но если я использую размытие для строки, ответа нет, но если я использую размытие для элемента, оно срабатывает, когда люди переключаются с одного элемента на другой.

Но если я использую focusout для строки, он также срабатывает всякий раз, когда кто-то покидает элемент, даже если он щелкает в той же строке. Кроме того, под переменной события нет ничего, что указывало бы мне, на каком элементе он устанавливает фокус, поэтому я не могу сравнить с текущей строкой, чтобы увидеть, просто ли они щелкают в строке.

Я думаю о том, чтобы сохранить его при вводе / нажатии кнопки «Сохранить» / «Начать редактирование другой строки», но я бы предпочел, чтобы это работало, так как это кажется гораздо лучшим способом сделать это. Кто-нибудь думал? Пожалуйста?


jquery tablerow focusout
person Gareth Parker    schedule 07.12.2011    source источник
comment
Можете ли вы опубликовать пример разметки?   -  person kinakuta    schedule 07.12.2011

Ответы (3)


arrow_upward
3
arrow_downward

Я бы обработал ваш запрос, привязав обработчик кликов ко всему документу, а затем добавив вызов 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');
    });

});
person Jake Feasel    schedule 07.12.2011
comment
Спасибо, пожалуй возьму этот - person Gareth Parker; 07.12.2011

arrow_upward
1
arrow_downward

Проблема в том, что даже если у вас есть вложенные элементы, фокус сработает на родительском элементе, когда вы сосредоточитесь на одном из дочерних элементов. Решение, которое я могу придумать, состояло бы в том, чтобы отслеживать текущую строку с помощью переменной. Псевдокод может работать примерно так:

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;
                       });
person Brian Glaz    schedule 07.12.2011
comment
Я думал об этом, но тогда, если они щелкнут за пределами стола, это не сохранится - person Gareth Parker; 07.12.2011

arrow_upward
0
arrow_downward

Есть 2 случая, когда вам нужно определить, когда строка теряет фокус: один, когда вы находитесь внутри таблицы, и два, когда вы покидаете стол.

Вы можете попробовать что-то вроде этого:

//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();
    };
})
person Mackraken    schedule 27.01.2016