Как я могу сделать одну ячейку в таблице «редактируемой содержимым» после нажатия кнопки «Редактировать» в таблице
Я работаю над страницей разрешений на своем сайте, и в настоящее время она настроена с тремя столбцами UsernamePermissions и 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.info(tds);
if ($this.val() === 'Edit') {
$this.val('Save');
if ($this.id !== '.edit') {
tds.prop('contenteditable', true);
}
}
Мне нужно, чтобы он выбирал только <td class='permissions'> в текущей строке, на которую была нажата кнопка.
Каков правильный способ выбрать только эту ячейку в соответствующей строке?
Я пробовал несколько способов попробовать и выбрать его только из tds на основе класса, но безуспешно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я сделал полностью редактируемую HTML-таблицу, используя DataTables и некоторый пользовательский код. Я не могу поделиться всем кодом, так как это проект с закрытым исходным кодом для работы, но я думаю, что это будет полезно.
Несколько полезных заметок:
1) Я использовал Mutation Observer Api для отслеживания изменений в значениях ячеек. Я сохранил каждую измененную ячейку в массиве, и при нажатии «Сохранить» массив отправляется с помощью AJAX в серверную часть.
2) Существует атрибут HTML с именем контентредактируемый. Он позволяет вам редактировать содержимое элемента. Используйте это для редактирования значений ячеек перед добавлением их в массив. Прикрепите прослушиватель событий к кнопке «Изменить» и при нажатии на нее добавьте этот атрибут ко всем элементам «td» вашей таблицы.
3) Вы просто отправляете массив со значениями на сервер и выполняете несколько простых запросов к своей базе данных.
Надеюсь, это поможет вам.
Вместо использования довольно сложной конструкции
var tds = $this.closest('tr').find('td').filter(function () {
return $(this).find('.edit').length === 0;
});
вы могли бы просто сделать
var tds = $(this).closest('tr').find('td.permissions');
чтобы определить целевой элемент, чтобы сделать редактируемым. Я предполагаю, что этот код является частью функции события «щелчок» для кнопки «редактировать».
Спасибо! Нашел этот первый фрагмент в Интернете и знал, что будет более простой способ сделать это.