javascript - 点击并编辑表格中的按钮后，如何在表格 "content editable"中创建一个单元格

Question

我正在我的网站上开发一个权限页面，目前将其设置为三列 Username Permissions和Action 。当我按Edit时Action 中的按钮我希望能够编辑 Permissions 列仅在该特定行中的列。现在我已经将它设置为 Username和Permissions单元格内容可编辑。

这是我对表的定义(从数据库中提取数据):

echo "<td class='username'>" . $row['username'] . "</td>";
echo "<td class='permissions'>" . $row['isAdmin'] . "</td>";
echo "<td><input type='button' class='btn btn-primary edit' value='Edit'></td>"

这是我当前用来更改行中每一列的脚本:

var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function () {
    return $(this).find('.edit').length === 0;
});
//console.log(tds);
if ($this.val() === 'Edit') {
   $this.val('Save');
   if($this.id !== '.edit') {
       tds.prop('contenteditable', true);
   }
}

我需要它只选择 <td class='permissions'>在单击按钮的当前行中。

仅选择相应行中的单元格的正确方法是什么？

我尝试了多种方法，仅根据类别从 tds 中选择它，但没有成功。

Answer 1

而不是使用相当复杂的构造

var tds = $this.closest('tr').find('td').filter(function () {
  return $(this).find('.edit').length === 0;
});

你可以简单地这样做

var tds = $(this).closest('tr').find('td.permissions');

标识要编辑的目标元素。我假设此代码是“编辑”按钮的“点击”事件函数的一部分。