更改表格行內的屬性

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