JavaScriptのインライン編集、元のデータを持つ編集をキャンセルするには？

Question

は、私はいくつかのAJAXを行うとのTDを取得し、[$(row_id).html(html)]行ののTDを交換、その後editRow機能はJavaScript

にデータ

<tr id="row_1"> 
    <td id="td_1_1">Text 1</td> 
    <td id="td_2_1">Text 2</td> 
    <td><a href="#" onclick="editRow(1)">Edit row</a></td> 
</tr> 

を持っています。すべてこれはうまく動作します。しかし、元のTDを元の状態に戻すために、キャンセルボタンを1つクリックする必要があります（入力ボックスはありません）。任意のアイデア、どのようにこの機能を達成するには？変数を編集する前に行htmlをコピーし、後でキャンセルして入力ボックスhtmlを置き換える必要がありますか？ご協力ありがとうございました。ユーザーがページ上のどこかにクリックした場合、キャンセルと元のデータを持ち帰るよう

EDIT

また、それを考慮する必要があります。このアクションをバインドする方法は？

Answer 1

まず、Javascriptフレームワークを調べます。あなたが話している機能の種類は、あなたが本当にすべてのブラウザで正しく機能するようにするには、あなた自身でこれを行うべきではないということを十分に前進させています。それはまた、あなたのHTMLに醜いインラインJavaScriptがないようにします。これは悪い習慣とみなされます。それは考えています：

「編集」モード "と"ノーマルモード "の行のいずれか？デフォルトでは「編集モード」の行を非表示にすることができます。編集リンクをクリックすると、その行を非表示にして編集した行を表示することができます。これは、編集フォームを取得するためにAJAX呼び出しを行うよりも簡単です。

EDIT

Here's some code to get you started：

function editRow(row_id, callback) { 
    // you would get this dynamically through ajax, thus why we need the callback 
    var html = '<tr id="edit_' + row_id + '" class="edit"><td><input type="text" name="td_1" value="Text 1"></td><td><input type="text" name="td_2" value="Text 2"></td><td><input type="submit" name="submit" value="submit"></td></tr>'; 
    callback(html); 
} 

$('a.edit', '#data').click(function() { 
    var $tr = $(this).closest('tr'); 
    var id = $tr.attr('id').split('_').pop(); 
    var edit_row = '#edit_' + id; 
    if($(edit_row).length == 1) { // edit row already exists 
     $tr.hide(); 
     $(edit_row).show(); 
    } else { // doesn't exist, fetch it 
     editRow(id, function(html) { 
      $tr.hide(); 
      $tr.after(html); 
     }); 
    } 
    return false; 
}); 

$(window).click(function(e) { 
    $('tr.edit:visible').each(function() { 
     var $tr = $(e.target).closest('tr'); 
     var id = $(this).attr('id').split('_').pop(); 
     console.log(e.target, $tr, this); 
     if($tr.attr('id') != this.id) { 
      $(this).hide(); 
      $('#row_' + id).show(); 
     } 
    }); 
}); 

私はおそらくあなたのためにこれの多くを行うjQueryのプラグインがたくさんあることに注意してください、そして、あなたのアプリケーションのニーズに応じて、毎回行をフェッチするだけでなく、フェッチしないなどの方が良いかもしれません。これは、あなたが望むものを達成するために何をしなければならないか、そして残りはあなた次第です。 :)

Answer 2

jQueryを使用して初期機能を取得すると、jEditableプラグインが表示されます。これは非常に機能的なプラグインで、テキストをクリックして編集可能な領域を作成してキャンセルすることができます。ユーザーが「OK」または「保存」をクリックすると、オリジナルに戻す必要はありません。問題です。 jEditableがこれを処理します。