我想从表中获取行 ID

Question

在我的应用程序中，我已将一些信息加载到表中。

现在我想在用户点击时获取该行的项目 ID。

这里的 Item.Id 是我想要得到的，但在这里我没有分配给任何表格行。 （我认为它不需要）。

到目前为止，我也创建了 JavaScript，但是当点击事件时我被困在获取 id 中。

你能帮我吗？ 这就是我到目前为止所做的

桌子

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

这是脚本。 它在单击时触发，但我想在用户单击特定行时获取 item.id。

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

Answer 1

要从目标获取 id，您必须在点击代码上执行此操作，如果它有 id，它将抓取它

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

Answer 2

解决方案之一是：

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