JQuery - сосредоточиться на TR - PullRequest
Новая
       29

JQuery - сосредоточиться на TR

5 голосов
/ 07 декабря 2011

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

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

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

Ответы [ 3 ]

3 голосов
/ 07 декабря 2011

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

});
1 голос
/ 07 декабря 2011

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

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;
                       });
0 голосов
/ 27 января 2016

Есть 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();
    };
})
...