更改表格行内的属性

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'); 
});