靶向从它的父母<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>