如何获取表格行中点击元素的 id？

Question

我有下表

<table width="97%" border="1" class="queueList">
    <thead>
      <tr>
         <th>Delete</th>
         <th>Queue Name</th>
         <th>Current queue length</th>
      </tr>
     </thead>
     <tbody>
            @foreach (var item in Model.ImportQueues)
            {
                <tr id="watchRow">
                    <td id="DeleteButton">X</td>
                    <td id="QueueName", value="@item.QueueName">@item.QueueName</td>
                    <td>@item.CurrentQueueLength</td>
                </tr>
            }
     </tbody>

如何在单击“#DeleteRow”时使用 JQuery 获取元素“QueueName”的值？

目前为止

$("body").on("click", "#DeleteButton", function (event) {    
    var queueName = $(event.target).closest("div.queueList").find("#QueueName");    
    alert(queueName);
}

Answer 1

使用 data 属性将所需的值存储在按钮本身上

<tr class="watchRow">
   <td class="DeleteButton" data-queuename="@item.QueueName">X</td>
   <td class="QueueName">@item.QueueName</td>
   <td>@item.CurrentQueueLength</td>
</tr>

然后点击TD（顺便说一下，它应该是一个按钮）

$("body").on("click", ".DeleteButton", function() {    
    var queueName = $(this).data("queuename");    
    alert(queueName);
}

如果您也想在其他按钮上使用此名称，例如编辑等，那么最好将其分配给整行：

<tr class="watchRow" data-queuename="@item.QueueName">
   <td class="DeleteButton">X</td>
   <td class="QueueName">@item.QueueName</td>
   <td>@item.CurrentQueueLength</td>
</tr>

然后这样读：

$("body").on("click", ".DeleteButton", function() {    
    var queueName = $(this).closest('tr').data("queuename");    
    alert(queueName);
}

Answer 2

没有 JQuery

<tr id="watchRow">
  <td class="DeleteButton" onclick="deleteItem(@item.QueueName)">X</td>
  <td value="@item.QueueName">@item.QueueName</td>
  <td>@item.CurrentQueueLength</td>
</tr>

<script>
function deleteItem(item) {
  alert(item)
}
</script>

使用 JQuery

<tr id="watchRow">
  <td class="DeleteButton">X</td>
  <td value="@item.QueueName">@item.QueueName</td>
  <td>@item.CurrentQueueLength</td>
</tr>

<script>
    $(".DeleteButton").on("click", function() {
      alert($(this).next("td").html());
    }
    </script>
</script>