靶向從它的父母<tr>與使用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

您可以使用find()以及:first（或:eq(0)）獲取該行內的第一個td。您還可以分別使用text()和addClass()更改單擊按鈕的文本和類別。最後，您可以通過將內容附加到td來將內容放置在input中。對於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>