Javascript/jquery Get Row Id on button click in a table

Question

I am beginner in javascript.So i am trying to get selected row id on button click.I am not sure i tried examples on internet however could not run code.

<tr>
 <input type="hidden" name="InterestID" id="InterestID" value="@info.InterestID" />

       <th>
           <input data-required="true" class="input-sm form-control datepicker" size="16" type="text" name="ValidDate" id="ValidDate" value="@info.ValidDate.ToShortDateString()" />
       </th>
       <th>
           <input class="form-control" data-required="true" name="Rate" id="Rate" value="@info.Rate" />
       </th>
       <th>
           <button type="button" class="btn btn-sm btn-danger" onclick="DeleteInterest()">Delete</button>
       </th>
</tr>

function DeleteInterest(parameters) {
    alert("Delete Button clicked");
}

When i click to "Delete" button , i want to get @info.InterestId for selected row.So how can i get selected row id on "Delete" button click by using javascript/jquery ?

Any help will be appreciated.

Thanks.

Answer 1

You can try to pass @info.InterestID to DeleteInterest:

Html:

<button type="button" class="btn btn-sm btn-danger" onclick="DeleteInterest(@info.InterestID)">Delete</button>

And Javascript

function DeleteInterest(id) {
    alert("Delete Button clicked with id " + id);
}

Hope that helps!

Answer 2

Use as below, As Ruben said if you not passing id into function then you can not get directly.

 <button type="button" class="btn btn-sm btn-danger" 
       onclick="DeleteInterest('@info.InterestID')">Delete</button>

 function DeleteInterest(id) {
   alert("Delete Button clicked with id " + id);
 }

OR You can get as below, without change HTML

 function DeleteInterest() {
   alert("Delete Button clicked with id " + $("#InterestID").val());
 }

Answer 3

I would get the value dynamically:

var DeleteInterest = function(e) {
    alert(this.parentNode.parentNode.getElementsByClassName("value")[0].value);
}

And the HTML:

<tr>
 <input type="hidden" class="value" name="InterestID" id="InterestID" value="@info.InterestID" />
       <th>
           <input data-required="true" class="input-sm form-control datepicker" size="16" type="text" name="ValidDate" id="ValidDate" value="@info.ValidDate.ToShortDateString()" />
       </th>
       <th>
           <input class="form-control" data-required="true" name="Rate" id="Rate" value="@info.Rate" />
       </th>
       <th>
           <button type="button" class="btn btn-sm btn-danger" onclick="DeleteInterest(this)">Delete</button>
       </th>
</tr>

I even consider more interesting having a hashmap in js matching the button with the value element instead of hidding it in the html, then, you should have:

var list = {<button_html_node_element>: '@info.InterestID'} 

And then, your delete function:

var DeleteInterest = function(e) {
    alert(list[e]);
}