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()更改所点击按钮的文字和类别。最后，您可以将内容附加到input，然后将其添加到td。试试这个：

＆＃13;

$('.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() + '" />');
});

＆＃13;

<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>

＆＃13;

使用jquery

1 个答案: