更改表格行内的属性答案

【问题标题】：Change attribute within a table row更改表格行内的属性
【发布时间】：2014-04-02 03:45:27
【问题描述】：

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

<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

【问题讨论】：

【解决方案1】：

ID 应该始终是唯一的。这就是他们背后的全部意义所在。如果您有多个元素，如果需要挂钩，请尝试使用类名。

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

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

这些方面的东西是您需要的 javascript：

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

【讨论】：

老兄，你是个传奇。这正是我想要的一点点改变。我已经接受了另一个答案，但这很棒。我从服务器为我的元素分配了一个类，但没有更改它们的 id，因为 rails 使用该 id 将它们保存到数据库中

【解决方案2】：

首先，您不能有重复的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>

编辑

正如下面的 cmets 所述，这可能嵌套在 tr 的直接后代之外，因此使用 find() 而不是 children() 会更合适：

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

【讨论】：