javascript jQuery隐藏表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5462452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery hide table row
提问by danny.lesnik
I have the following jQuery script which hides/expands row in table:
我有以下 jQuery 脚本，它隐藏/扩展表中的行：
it was inspired by this example:
它的灵感来自这个例子：
http://www.jankoatwarpspeed.com/examples/expandable-rows/
http://www.jankoatwarpspeed.com/examples/expandable-rows/
<script type="text/javascript">
$(document).ready(function(){
$("#orders tr:odd").addClass("odd");
$("#orders tr:not(.odd)").hide();
$("#orders tr:first-child").show();
$("#orders tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".toggler").toggleClass("on");
$(this).find(".toggler").text("hide");
});
});
</script>
My HTML is the following:
我的 HTML 如下：
<table class="blueWrapperTbl" id="orders">
<tbody>
<tr>
<td> <h:outputText value="#{order.orderId}" /> </td>
<td> <h:outputText value="#{order.orderId}" /> </td>
<td> <h:outputText value="#{order.orderId}" /> </td>
<td> <h:outputText value="#{order.orderId}" /> </td>
<td><a href="#" class="ubber"><b>Change Order</b></a></td>
<td><a href="#" class="toggler">Show</a></td>
</tr>
<tr>
...
</tr>
</table>
The relevant CSS parts is the following:
相关的 CSS 部分如下：
.blueWrapperTbl .toggler { background:url(../images/plus.gif) right center no-repeat; padding-right:20px; display:inline-block; text:'fff'}
.blueWrapperTbl .toggler.on { background:url(../images/minus.gif) right center no-repeat; }
I need to do the following:
我需要执行以下操作：
- When my row is expended I would like to change 'toggler' text from 'Show' to 'hide'.
- When my row is hidden I dont need to show 'Change order' URL. It must be hidden.
- 当我的行用完时，我想将“切换器”文本从“显示”更改为“隐藏”。
- 当我的行被隐藏时，我不需要显示“更改订单”网址。它必须被隐藏。
Please help me.
请帮我。
回答by Kyle Humfeld
The toggle()and toggleClass()functions are convenience functions that make it easier to do simple things... but they are limited.
该toggle()和toggleClass()功能是方便的功能，使其更容易做简单的事情......但他们的限制。
Rather than use toggleClass(), you might consider using an ifto check to see if the element has the 'on' class. If it does, remove that class and change the text to 'Show'. If it doesn't, add the 'on' class and change the text to 'Hide'.
toggleClass()您可以考虑使用 anif来检查元素是否具有 'on' 类，而不是使用。如果是，请删除该类并将文本更改为“显示”。如果没有，请添加“on”类并将文本更改为“隐藏”。
Rather than using toggle(), you could check for the visibility of the row. If it's visible, hide it and hide the 'Change order' URL. If it's not visible, show it and show the 'Change order' URL.
toggle()您可以检查行的可见性，而不是使用。如果可见，请将其隐藏并隐藏“更改订单”URL。如果它不可见，请显示它并显示“更改订单”URL。
Here's a notional example:
这是一个概念性的例子：
$('#orders td a')
.each(function(){
if( $(this).hasClass('on') ) {
$(this).removeClass('on');
// do other things
} else {
$(this).addClass('on');
// do other things
}
}
;
I hope this helps!
我希望这有帮助！
回答by Alp
1) Instead of
1) 而不是
$(this).find(".toggler").text("hide");
use
利用
$(this).find(".toggler").html("hide");
2) Add this to your click handler function
2）将此添加到您的点击处理程序函数
$(this).find(".ubber").toggle();
