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>

CodePudding user response：

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)
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

One of the solutions is:

<script type="text/javascript">
    $("#tblParts tr").click(function (event) {            
            var cell = this.getElementsByTagName("td")[0];
            alert("PartNo: "   cell.innerText);           
        });
</script>