jQuery隐藏表格行

Question

我有以下 jQuery 脚本隐藏/扩展表中的行：

它的灵感来自这个例子：

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>        

我的 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>

相关的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; }

我需要做以下事情：

1. 当我的行用完后，我想将“切换”文本从“显示”更改为“隐藏”。
2. 当我的行被隐藏时，我不需要显示“更改订单”URL。必须隐藏。

请帮助我。

Answer 1

toggle() 和 toggleClass() 函数是方便的函数，可以更轻松地完成简单的事情......但它们是有限的。

您可以考虑使用if 来检查元素是否具有“on”类，而不是使用toggleClass()。如果是这样，请删除该类并将文本更改为“显示”。如果没有，请添加“on”类并将文本更改为“隐藏”。

您可以检查行的可见性，而不是使用toggle()。如果它可见，请将其隐藏并隐藏“更改订单”URL。如果它不可见，请显示它并显示“更改订单”网址。

这是一个概念性的例子：

$('#orders td a')
    .each(function(){
        if( $(this).hasClass('on') ) {
            $(this).removeClass('on');
            // do other things
        } else {
            $(this).addClass('on');
            // do other things
        }
    }
;

我希望这会有所帮助！

Answer 2

1) 代替

$(this).find(".toggler").text("hide");

使用

$(this).find(".toggler").html("hide");

2) 将此添加到您的点击处理函数

$(this).find(".ubber").toggle();