jquery/javascript onclick顯示下一行

我有一個表，有一行隱藏使用display：none。我想在單擊按鈕時顯示該行。我怎樣才能做到這一點？？jquery/javascript onclick顯示下一行

<table> 

<tr> 
<td> 
<button class="shownextrow">Show Next Row</button> 
</td> 
</tr> 

<tr style="display:none"> 
<input type="text" name="input"/> 
</tr> 

</table>

來源

2010-09-27 user342391

您可以綁定到該按鈕，比較發現，像這樣：

$("button.shownextrow").click(function() { 
    $(this).closest("tr").next().show(); 
});

這正好從按鈕（$(this)）到<tr>使用.closest()然後得到.next()兄弟<tr>到.show() 。你可能想使用.toggle()而不是.show()，但其餘的都是一樣的。

You can give it a try here。請注意，在示例中，您直接在<tr>中有<input>，我將其包裝在<td>中以使其成爲有效的演示。

來源

2010-09-27 15:22:33

我怎樣才能顯示一個隱藏的對象，在我剛剛顯示的tr？ – user342391 2010-09-27 15:45:34

@ user342391 - 我不會在裏面隱藏任何東西......但是你可以在上面的例子中的'.show（）'之後添加一個'.find（'whatever'）。show（）'來查找/顯示一些東西內。 – 2010-09-27 15:47:10

Nick's approach是好的，但我通過delegate功能可能使用一個單一的處理器爲整個表（「事件代理」），而不是在每個按鈕單獨處理，這樣的：

$('#theTable').delegate("button.shownextrow", "click", function() { 
    $(this).closest("tr").next("tr").show(); 
});

Live example

除了其他的東西，它可以讓你添加更多的行到表對（並刪除行對），而不用擔心掛鉤/取消掛鉤事件處理程序。看來，這確實需要button元素和table元素之間沒有什麼直接的層次吃點擊...

這裏是我未使用delegate，只是歷史的目的 — 年長例如哇不delegate簡化代碼：

~~$('#theTable').click(function(event) { var button = $(event.target).closest("button.shownextrow"); if (button.length > 0) { button.closest("tr").next("tr").show(); } });~~

~~Live example~~

來源

2010-09-27 15:30:11

如果您正在使用委託，請使用'.delegate（）'，例如：http://jsfiddle.net/nick_craver/Fds5z/1/ – 2010-09-27 15:36:50

@Nick：我正在修改您發佈的內容。 :-) – 2010-09-27 15:37:09

你可以簡單地調用父tr顯示下一個tr：

$('button.shownextrow').click(function() { 
    $(this).parents('tr').next('tr').show(); 
});

我用它和它的工作就好了。

來源

2014-02-26 18:34:32 Yehia

jquery/javascript onclick顯示下一行

回答

相關問題