HTML Table: Edit button trigger Javascript event

Question

I have a HTML table which I am populating with PHP.

I have

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

to build the edit button for each for.

I am trying to avoid using JQuery, but I need to write a Javascript function to get the data-value of the respective edit button that has been pressed, so I can perform the relevant action (in this case it will take me to another page).

Here is what I tried already:

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

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

Answer 1

this in your existing function doesn't refers to your element. Change the the HTML and pass current element context to inline click handler ie onclick='Edit_Btn_Click(this);'

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

Then modify your function as

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

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

In the above function, You can use Element.dataset property to access the data.

Answer 2

您可以使用：

this.getAttribute('data-value');