5

さて、私は自分のウェブサイトでテーブルのインライン編集を可能にするプラグインを作成しています。これまでのところうまくいっています。ほとんどの作業は完了しましたが、フォーカシングをテーブルから正しく取り出すことができないようです. そのため、誰かが編集を終えて新しい行の編集を開始したり、行の外をクリックしたりした場合は、保存して通常に戻る必要があります。しかし、行でぼかしを使用すると応答はありませんが、要素でぼかしを使用すると、ある要素から別の要素に交換したときにトリガーされます

しかし、行で focusout を使用すると、同じ行をクリックしても、誰かが要素を離れるたびにトリガーされます。また、イベント変数の下には、フォーカスを設定している要素を教えてくれるものがないため、現在の行と比較して、行をクリックしているだけかどうかを確認することはできません。

Enter/マウスクリックで保存ボタン/別の行の編集を開始することで保存することを考えていますが、これを機能させる方がはるかに優れているようです。誰かと思った？お願いします？

4

3 に答える 3

3

ドキュメント全体のクリック ハンドラーをバインドし、他のクリック イベント内に 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');
    });

});
于 2011-12-07T05:24:17.113 に答える
1

問題は、ネストされた要素がある場合でも、子要素の 1 つにフォーカスすると親要素で 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;
                       });
于 2011-12-07T05:11:15.277 に答える
0

行がいつフォーカスを失ったかを検出する必要があるケースが 2 つあります。1 つはテーブル内にいるとき、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();
    };
})
于 2016-01-27T18:15:08.897 に答える