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

我需要做以下事情：

当我的行被用完时，我想将'toggler'文本从'Show'更改为'hide'。
当我的行被隐藏时，我不需要显示“更改订单”网址。必须隐藏它。

请帮帮我。

Answer 1

toggle()和toggleClass()函数是方便函数，可以更轻松地执行简单的操作......但它们是有限的。

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

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

这是一个名义上的例子：

$('#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();

jQuery隐藏表行

2 个答案: