Question

如果这是一个重复的问题我很抱歉，但我找不到答案。没有例子，我无法找到解决问题的方法。想象一下，我有数百行的表。现在，我在每个行上都有一个选择框：

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

选项现在不是问题（我的实际文件中有一些）。现在，所有这些选择框都具有相同的id字段。我想知道当点击相应的<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"); });

Answer 2

ID应该始终是唯一的。这就是他们背后的重点。如果您有多个元素，请在需要钩子时尝试使用类名。

如果这些输入是通过循环或其他方式在服务器端生成的，请查看是否可以将循环迭代器或其他内容附加到id。例如，“mySelect1”。

Check out this jsFiddle它应该让你朝着正确的方向前进。

这些方面的内容是您需要的JavaScript：

$('table td').on('click', function (event) {
    $(this).closest('tr').find('select').css('display', 'block');
});

更改表格行中的属性

2 个答案: