以前の記事で説明したように、私は編集可能なテーブル機能を開発していますjqueryの

Question

を使用して、データの属性とその親から​​をターゲット：Editable row in a table - is using the record ID on a <tr> element bad practice?

私は次のマークアップ持っている：

<tr data-id="2"> 
    <td>Foo</td> 
    <td><button class="editBtn">Edit</button></td> 
</tr> 
<tr data-id="3"> 
    <td>Bar</td> 
    <td><button class="editBtn">Edit</button></td> 
</tr> 

を

jqueryの使用私は.editBtnをターゲットにして編集している行を整理してから、次にdata-id要素を使って解決しました。

$('.editBtn').click(function() { 
    id = ($(this).closest('tr').data('id')); 
    console.log(id); 
}); 

私はこのIDを与えられていますが、tdの要素にカテゴリ名を持つ要素（この例ではFooとBar）をどのようにターゲットできますか？

私はこれらのコンテンツを取るので、編集可能なフィールドにそれらを配置することができるようにしたい：

<td><input type="text" value="Foo"></td> 

私も「保存」ボタンに「編集」ボタンを変更できるようにする必要がありますこの時点で、別のクラス名、例えば

<td><button class="saveBtn">Save</button></td> 

どうすればいいですか？

Answer 1

あなたは行内の最初のtdを取得するために:first（または:eq(0)）と一緒にfind()を使用することができます。クリックしたボタンのテキストとクラスは、それぞれtext()とaddClass()を使用して変更することもできます。最後に、コンテンツをinputに置き、tdに追加することができます。それ表示しますsaveBtnため

$('.editBtn').click(function() { 
 
    var $button = $(this).addClass('save').text('Save'); 
 
    var $tr = $button.closest('tr'); 
 
    var id = $tr.data('id'); 
 
    var $td = $tr.find('td:first'); 
 
    
 
    $td.html('<input value="' + $td.text() + '" />'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr data-id="2"> 
 
    <td>Foo</td> 
 
    <td> 
 
     <button class="editBtn">Edit</button> 
 
    </td> 
 
    </tr> 
 
    <tr data-id="3"> 
 
    <td>Bar</td> 
 
    <td> 
 
     <button class="editBtn">Edit</button> 
 
    </td> 
 
    </tr> 
 
</table>