HTML-通过在同一行中按下按钮来获取行ID

Question

假设我有一个HTML表，并且每一行都有一些数据，一个更新和一个删除按钮。我想要通过单击“更新”按钮来检索此特定行所具有的每个数据。我搜索了其他示例，但是它们中的大多数都只是通过使用列ID遍历一列，并仅打印找到的每个单元格数据。在按下更新按钮时，我需要检索该行具有的所有当前单元格数据。我怎样才能做到这一点？

JS小提琴这里

Could not properly indent code after trying for more than 30mins so I gave up

Answer 1

您可以从以下位置更改html按钮：

<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>

至：

<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                                                                      ^^^^

将此关键字添加到要传递当前按钮的函数中。现在，为了获得相应的行，您就可以使用jQuery.closest（）：

var row = $(ele).closest('tr');

或与普通js .closest（）

var row = ele.closest('tr');

对于更新按钮，您可以添加点击处理程序：

$('#employees-table tbody button.btn.btn-warning').on('click', function(e) {

或使用普通js .querySelectorAll（）：

document.querySelectorAll('#employees-table tbody button.btn.btn-warning').forEach.....

jQuery代码段：

<button type="button" class="btn btn-danger" onclick="getConfirmation();">Delete</button>

<button type="button" class="btn btn-danger" onclick="getConfirmation(this);">Delete</button>
                                                                      ^^^^

根据侯赛因·阿斯曼德（Hossein Asmand）的评论（我该如何仅使用Javascript做到这一点？），一个完整的js解决方案如下：

var row = $(ele).closest('tr');

var row = ele.closest('tr');