HTML Table:编辑按钮触发Javascript事件

Question

我有一个 HTML table，我正在填充 PHP。

我有

<td><a class='Edit_Btn' data-value='".$row["Driver_Reference"]."' onclick='Edit_Btn_Click();' href='#'>Edit</a></td>

为每个构建编辑按钮。

我试图避免使用 JQuery，但我需要编写一个 Javascript 函数来获取已按下的相应编辑按钮的数据值，因此我可以执行相关操作（在这种情况下，它将带我到另一页）。

这是我已经尝试过的：

function Edit_Btn_Click(Driver_Reference) {
    var Driver_Reference = this.dataValue;

    alert("Edit button pressed! Artist ID: " + Driver_Reference);
}

Answer 1

您可以使用：

this.getAttribute('data-value');

Answer 2

this 在您现有的函数中没有引用您的元素。更改 HTML 并将当前元素上下文传递给内联点击处理程序，即 onclick='Edit_Btn_Click(this);'

 <td><a class='Edit_Btn' data-value='".$row["Driver_Reference"]."' onclick='Edit_Btn_Click(this);' href='#'>Edit</a></td>

然后修改你的函数为

function Edit_Btn_Click(elem) {
    var Driver_Reference = elem.dataset.value;

    alert("Edit button pressed! Artist ID: " + Driver_Reference);
}

在上面的函数中，您可以使用Element.dataset 属性来访问数据。

HTML Table:编辑按钮触发Javascript事件

HTML Table: Edit button trigger Javascript event

html

javascript

triggers

edit

button