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>

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

到目前为止我有

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

Answer 1

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

Answer 2

使用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);
}

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

2 个答案: