他の場所をクリックした場合、要素スタイルを通常の状態に戻すにはどうすればいいですか？

Question

私のようなテーブルが編集は、私は、これは入力フィールドとテキストを置き換え

$('.editRow').click(function() { 
     var row = $(this).parent('tr'); 

     row.find('.1u').slideUp('fast'); 
     row.find('.1p').slideUp('fast'); 
     row.find('.inputTxt').slideDown('fast'); 

    }); 

この機能を実行するをクリックすると、私は何をしたいときにテキストにこのバックをキャンセルする

<tr> 
    <td>No.</td> 
    <td>Username</td> 
    <td>Password</td> 
    <td>Valid Until</td> 
    <td>Delete</td> 
    <td>Edit</td> 
</tr> 
<tr> 
    <td>1</td> 
    <td id="1"> 
       <div class="1u" style="display: none;">Username</div> 
       <input type="text" class="inputTxt" value="Username" style="display: block;"/> 
      </td> 
    <td id="1"> 
       <div class="1p" style="display: none;">Password</div> 
       <input type="text" class="inputTxt" value="Password" style="display: block;"/></td> 
    <td>18 Jul 09</td> 
    <td><button value="1" class="deleteThis">x</button></td> 
    <td class="editRow">Edit</td> 
</tr> 

あり、この持っています別の場所が保存の代わりにクリックされています。

は、どのように私はこれを行うことができ、私の機能を改善するための任意の提案$('.editRow').click

////////////編集//////////

 $('.editRow').click(function() { 
     var row = $(this).parent('tr'); 

     row.find('.1u').slideUp('fast'); 
     row.find('.1p').slideUp('fast'); 
     row.find('.inputTxt').slideDown('fast'); 

    }).blur(function() { 
     row.find('.inputTxt').slideUp('fast'); 
     row.find('.1u').slideDown('fast'); 
     row.find('.1p').slideDown('fast'); 
    }); 

私はこれを使用していますが、入力フィールドはテキストに戻っていません。

ありがとうございます。

Answer 1

このぼかし機能は機能していなかったので、キャンセルボタンを追加してジョブを実行しました。

Answer 2

あなたはちょうどあなたがクリックのためにしたのと同じように、ぼかしイベントを処理することができます。これは

UPDATE

 $('.editRow').click(function() { 
      var row = $(this).parent('tr'); 

      row.find('.1u').slideUp('fast'); 
      row.find('.1p').slideUp('fast'); 
      row.find('.inputTxt').slideDown('fast').blur(function(){ 

       //change the .inputTxt control to a span 
      }); 

    }) 

Answer 3

を助け

$('.editRow').click(function() { 
      var row = $(this).parent('tr'); 

      row.find('.1u').slideUp('fast'); 
      row.find('.1p').slideUp('fast'); 
      row.find('.inputTxt').slideDown('fast'); 

    }).blur(function(){ do something else}); 

希望また、table要素のクリックハンドラを置くことができます。すべてのクリックは、バブリングのためにハンドラを通過します。

Answer 4

行自体がフォーカスを受け取らないため、.blur（...）ハンドラを呼び出すべきではありません。代わりに、編集可能な各コントロールにブラーハンドラを配置することができます。そのハンドラの内部で、編集可能なフィールドにフォーカスがあるかどうかを確認します。そうでなければ、編集モードを終了するルーチンを呼び出します。

-EDIT-

あなたは上記の編集済みの推測にすぎオフはありませんでした。

$('.editRow').click(function() { 
    var row = $(this).parent('tr'); 

    row.find('.1u').slideUp('fast'); 
    row.find('.1p').slideUp('fast'); 
    row.find('.inputTxt').slideDown('fast').blur(function(){ 
     row.find('.1u').slideDown('fast'); 
     row.find('.1p').slideDown('fast'); 
     row.find('.inputTxt').slideUp('fast'); 
    }); 
})