javascript - 更改表行内的属性

Question

如果这是一个重复的问题，我深表歉意，但我找不到答案。如果没有示例，我无法找到提出问题的方法。 想象一下我有一个包含数百行的表。现在，在每一行上我都有一个选择框:

<select id="task_stat" name="task[stat]" style="display: none;"></select>

选项现在不再是问题(我的实际文件中有一些选项)。现在所有这些选择框都有相同的 id field 。我想知道如何在对应的 <tr> 时更改仅一个选择框的显示被点击。我有以下内容:

$("#myTableId tr").click(function() {
    $("select #task_stat").css("display"),"block");
});

当然有$(document).ready功能。但这将显示所有选择框(如预期)，而不仅仅是一个。有没有办法只显示单击的表格行上的选择框？ (如果可以点击 <td> 我真的很喜欢它，但我不认为 <td> 支持 .click

Answer 1

首先，不能有重复的 id 字段，而应使用类。其次，您应该能够像这样更改您的函数，该函数引用被单击的 tr 的子元素:

$("#myTableId tr").click(function() {
    $(this).children("select .task_stat").css("display","block");
});

这假设您将标记更改为如下所示:

<select class="task_stat" name="task[stat]" style="display: none;"></select>

编辑

正如下面的评论中提到的，这可能嵌套在 tr 的直接后代之外，因此使用 find() 而不是 children():

$("#myTableId tr").click(function() {
    $(this).find("select .task_stat").css("display","block");
});