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 in the click event.
Can you help me here?
This is how I done so far:
<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>
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)
}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>