クリックした行を編集可能にする

Question

私は各行の編集ボタンを使って次の表を動的に作成しています。

<tr> 
<td><?php echo $f1; ?></td> 
<td><?php echo $f2; ?></td> 
<td><?php echo $f3; ?></td> 
<td><?php echo $f4; ?></td> 
<td><input class="edbuttons" type="button" value="Edit"></td> 
</tr> 

編集ボタンをクリックすると、行内のセルをテキストボックスに変換したいのですが、それを行う方法がわかりません。私は正しい構文のためにネットを検索する時間を費やしましたが、必要なものを見つけることができません。

編集をクリックすると、行のデータを変更し、編集ボタンの代わりに表示される保存またはキャンセルボタンをクリックすることができます。

セレクタとして使用するために、編集ボタンにクラスを追加しましたが、これが最も効率的な方法かどうかはわかりません。

感謝の気持ちで助けてください！

ありがとうございました

Answer 1

Jeditableはそのための優れたプラグインです。

また、新しいhtml5 contenteditable属性を調べることもできます。これをtrueに設定すると、内部のテキストを編集することができます。

<td id="myText"> 
    <div>My text goes here</div> 
    <input type="text" name="whatever" value="My text goes here" style="display:none;"/> 
</td> 

その後、あなたの編集ボタンは、それらの両方を切り替えています：

//if you have jquery: 
$('#myText div').toggle(); 
$('#myText input').toggle(); 

場合は、テキストと表のセル内のそのテキストを入力ボックスの両方を入れ

http://html5demos.com/contenteditable

Answer 2

あなたはjqueryを使用していない、あなたはそれぞれの表示を変更するためにJavaScriptを使用することができます。

明らかに他にも少し問題がありますが、テキストを入力ボックスに変えているように見えるようにするための一般的な考え方です。