0

私はデータを持っています

<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>

その後、JavaScriptで

function editRow(row_id) {
   //some ajax to retrieve html in the format
   //<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>
}

editRow関数で、いくつかのajaxを実行し、TDを取得し$(row_id).html(html)て、行のTDを置き換えます[]。これはすべて正常に機能します。ただし、キャンセルボタンを1つ用意する必要があります。クリックすると、元のTDが元に戻ります（つまり、入力ボックスがありません）。この機能を実現するためのアイデア、方法はありますか？編集前の行のhtmlを変数にコピーし、後でキャンセルして入力ボックスのhtmlを置き換える必要がありますか？ご協力ありがとうございました。

編集

また、ユーザーがページの別の場所をクリックした場合は、キャンセルと見なして元のデータに戻す必要があります。このアクションをバインドする方法は？

4

2 に答える 2

1

まず第一に-Javascriptフレームワークを調べてください。あなたが話している種類の機能は十分に進んでいるので、本当にすべてのブラウザでコードを正しく動作させたいのであれば、自分でこれを行うべきではありません。また、HTMLを醜いインラインJavascriptなどから解放することもできますが、これは悪い習慣と考えられています。

アイテムごとに2つの行を作成することを検討しましたか。1つは「編集モード」の行で、もう1つは「通常モード」の行です。「編集モード」の行をデフォルトで非表示にするようにスタイルを設定できます。誰かが編集リンクをクリックすると、その行を非表示にして、編集した行を表示できます。これは、編集フォームを取得するためにAJAX呼び出しを行うよりも本当に簡単です。

編集

始めるためのコードは次のとおりです。

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プラグインがたくさんあることに注意する必要があります。アプリケーションのニーズによっては、行をまったくフェッチしないで、毎回行をフェッチする方がよい場合があります。は、あなたが望むことを達成するためにあなたがしなければならないかもしれないことの単なる大まかな考えであり、残りはあなた次第です。:)

于 2009-06-14T22:10:16.947 に答える
1

jQueryを使用して初期機能を取得するには、jEditableプラグインを確認できると思います。これは非常に機能的なプラグインで、テキストをクリックして編集可能な領域を作成し、キャンセルすることができます。ユーザーが[OK]または[保存]をクリックすると、元に戻す必要がないことを前提としています。問題です。jEditableがこれを処理します。

于 2009-06-14T22:47:40.057 に答える