jQuery - TRにフォーカスする

Question

さて、私は自分のウェブサイトでテーブルのインライン編集を可能にするプラグインを作っていますが、これまでのところ素晴らしい結果が得られましたが、そのほとんどは完了しましたが、テーブルの右に焦点を当てる。誰かが編集を終えて新しい行の編集を開始したり、行の中をクリックしたりすると、保存して通常の状態に戻ります。しかし、私が行にぼかしを使用する場合は、応答はありませんが、私は要素にブラーを使用すると、それは人々がある要素から別の要素にスワップするときにトリガーします

私は行にフォーカスアウトを使用する場合、たとえ同じ行をクリックしたとしても、その要素も同様です。また、イベント変数の下には、フォーカスを設定している要素がわからないので、現在の行と比較して行内をクリックしているかどうかを確認することはできません。

Enter/Mouseで保存することを考えていますSaveボタンをクリック/別の行の編集を開始しますが、これを実行する方がはるかに良い方法のように思われます。誰にでも分かる？お願いします？

Answer 1

：擬似コードは次のように動作する可能性があります。私はセットアップを実証するフィドルました：http://jsfiddle.net/NwftK/

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

とjQuery：あなたがテーブルの中にある間、あなたは行がフォーカスを失ったときに検出する必要が2例、一つは

$(function() { 
    $("#myRow").on('click', function (e) { 
     $(this).css('background-color', 'blue'); 
     e.stopPropagation(); 
    }); 

    $(document).on('click', function() { 

     $("#myRow").css('background-color', 'red'); 
    }); 

}); 

Answer 2

問題があるのは、ネストされた要素があっても、子要素の1つにフォーカスすると、フォーカスが親要素にトリガーされることです。私が考えることができる解決策は、変数を使って現在の行を追跡することです。私は文書全体のクリックハンドラを結合して、私の他のクリックイベント内のstopPropagation（）の呼び出しを追加することによって、あなたの要求を処理します

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

がありますあなたがテーブルを出るときに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(); 
    }; 
})