編集ボタン付きテーブルのインライン編集

Question

以下のサンプルコードは、編集ボタンで編集可能な行を作成するためのコードです.3つのボタンがあります。最初は、更新ボタンを隠しています。編集ボタンをクリックすると、私はインライン編集をクリックして無効にする必要があります。
私は以下のコードを書きましたが、私が間違ったことを見つけることができませんでしたか？

完全コード：Fiddle。 主なものは動的なデータを使用していますので、選択した行だけをクリックすると有効になります。私が間違ったことを教えてください。

Answer 1

以下のコードを見てください。唯一の変更のカップルとそのちょうどあなたのコード：https://jsfiddle.net/xcmvzpuk/5/

$('.edit').click(function() { 

    var editId = $(this).attr('id'); //here we will get id like edit0 and edit1 and so on 
    $("#" + editId).hide(); 
    var number = editId.replace("edit", ""); //grab the number from id 
    $("#update" + number).show();//show the corresponding update button 

    var currentTD = $(this).parents('tr').find('td'); 
    //enable the current row 
    $.each(currentTD, function() { 
     $(this).prop('contenteditable', true) 
    }); 

    }); 

    $('.update').click(function() { 
    var updateId = $(this).attr('id'); 
    $("#" + updateId).hide(); 
    var number = updateId.replace("update", ""); 
    $("#edit" + number).show(); 

    var currentTD = $(this).parents('tr').find('td'); 
    //disable the current row 
    $.each(currentTD, function() { 
     $(this).prop('contenteditable', false) 
    }); 
    }); 

Answer 2

名前

あなたtr数値行ごとに - その後、あなたの編集ボタンを作る例row1、row2のため、および潜在的に編集可能なtd.tdCanEditのようにクラスを追加それに応じてbutton1,button2という名前が付けられています。次に、クリックされたボタンを押す機能を作成します。その番号を抽出します。この番号を使用して行IDを取得します。あなたの行の子どもたちのそれぞれの.tdCanEdit分類された要素を見つけてください。あなたの.contenteditableクラスを追加してください。

もちろん、修了後に.contenteditableクラスをすべて削除してください。

($(this).html() == 'Edit')のチェックを避けてください。代わりにクラスを使用する（ボタンにいくつかのクラスを追加する）。