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');

标识要编辑的目标元素。我认为这段代码是“编辑”按钮的“单击”事件功能的一部分。

Answer 2

我使用DataTables和一些自定义代码制作了一个完全可编辑的HTML Table。我不能共享整个代码，因为它是一个工作的封闭源代码项目，但是我认为这会有所帮助。

Take a look at my repo

一些有用的注释：

1）我使用了Mutation Observer Api来跟踪单元格值的变化。我将每个更改的单元格存储在一个数组中，然后单击“保存”，该数组将通过AJAX发送到后端。

2）有一个名为 contenteditable 的HTML属性。它使您可以编辑元素的内容。使用它来编辑单元格的值，然后再将其附加到数组。将事件侦听器附加到“编辑”按钮，然后单击它，然后将此属性添加到表的所有“ td”元素中。

3）您只需将带有值的数组发送到后端，然后对数据库运行一些简单的查询。

希望它对您有帮助。

在点击表格中的“编辑”按钮后，如何使表格中的一个单元格“内容可编辑”

2 个答案: