I want to get row Id from Table

Question

In my application I have loaded some information's to the table.

Now I want to get the item Id of that row when user clicks.

Here Item.Id is the one I want to get it but here I didn't assigned to any table row. (I thought it doesn't need to).

So far I have created the JavaScript also, But I'm stuck within getting id when click event.

Can you help me here. This is how I done so far

Table

<div class="table-full-width table-responsive">
<table class="table" id="tblParts">
   <tr>
      <th>
         @Html.DisplayNameFor(model => model.First().PartNo)
      </th>
      <th>
         @Html.DisplayNameFor(model => model.First().PartDescription)
      </th>
      <th>
         @Html.DisplayNameFor(model => model.First().PartModel)
      </th>
      <th>
         @Html.DisplayNameFor(model => model.First().AvaQty)
      </th>
      <th>
         @Html.DisplayNameFor(model => model.First().ReOrderQty)
      </th>
      <th>
         @Html.DisplayNameFor(model => model.First().PartCatogary)
      </th>
      <th>
         @Html.DisplayNameFor(model => model.First().LastUpdated)
      </th>
      <th></th>
   </tr>
   @foreach (var item in Model)
   {
   <tr>
      <td>
         <a href="#">
         @Html.DisplayFor(modelItem => item.PartNo)
      </td>
      <td>
         <a href="#">
         @Html.DisplayFor(modelItem => item.PartDescription)
      </td>
      <td>
         <a href="#">
         @Html.DisplayFor(modelItem => item.PartModel)
      </td>
      <td>
         <a href="#">
         @Html.DisplayFor(modelItem => item.AvaQty)
      </td>
      <td>
         <a href="#">
         @Html.DisplayFor(modelItem => item.ReOrderQty)
      </td>
      <td>
         <a href="#">
         @Html.DisplayFor(modelItem => item.PartCatogary)
      </td>
      <td>
         <a href="#">
         @Html.DisplayFor(modelItem => item.LastUpdated)
      </td>
   </tr>
   }
</table>

This is the script. It triggers when clicks, but I want to get the item.id when user click the certain row.

<script type="text/javascript">
   $("#tblParts tr").click(function (event) {
       alert("Row Clicked");
   });
</script>

Answer 1

To get the id From target you have to do this on the code of click and if it has an id it will grab it

 function(event){ alert(event.target.id) }

Answer 2

One of the solutions is:

<script type="text/javascript">
        
    window.onload = function () {
        addRowClickEventHandlers();
    }

    function addRowClickEventHandlers() {
        var table = document.getElementById("tblParts");
        var rows = table.getElementsByTagName("tr");
        for (i = 0; i < rows.length; i++) {
            var currentRow = table.rows[i];

            var createClickHandler = function (row) {
                return function () {
                    var cell = row.getElementsByTagName("td")[0];                        
                    alert("PartNo: " + cell.innerText);                                               
                };
            };
            currentRow.onclick = createClickHandler(currentRow);
        }
    }
</script>