Question

<table> //big table
       <tr >
        <td></td><td></td><td></td><td></td>
       </tr>    

        <tr >
        <th colspan='4'>
                 <div> 
                       <table> //small table
                               <tr>
                                      <td></td> <td></td><td></td><td></td><td></td>
                               </tr>
                       </table>
                 </div>
            </th>   
       </tr>
</table>

每个偶数行的大动态表都有一个表格，用于解释有关行befor（奇数行）的数据。我想最初隐藏所有偶数行（里面有一个表的行）。

在每个奇数行的点击事件中，我想隐藏/取消隐藏下一个偶数行（里面有一个表格）

this is my ajax calls

    $.get("invoice_ajax.php", 
    {"q": test},
    function(data) 
    {
    $('#balance').html = data;

使用此代码我试图滑动偶数行。

$('#balance').on("click","table",function(event) 
            {
                event.stopPropagation();
                var $target = $(event.target);
                if ( $target.closest("td").attr("colspan") > 1 ) 
                {
                    $target.slideUp();
                } 
                else 
                {
                    $target.closest("tr").next().find("div").slideToggle();
                }                    
            });

首先，Ajax调用一切正常，每次点击显示或隐藏下一行，但在第二次调用后，在第三次调用（显示，隐藏，显示）后第二次ajax调用奇数行的点击事件（显示并隐藏下一行）（显示，隐藏，显示，隐藏）随着每次ajax调用，它会继续增加。

此外，我不知道如何最初隐藏行。

编辑：页面简而言之 - http://pastebin.com/QtTxXnzX

Answer 1

...但在第二个ajax调用奇数行的点击事件（显示并在第三次调用（显示，隐藏，显示）之后隐藏下一行呼叫（显示，隐藏，显示，隐藏），它随着时间的推移而不断增加 ajax电话。

这是因为您的$('#balance').on("click", "table", ...)事件处理程序位于dropBoxChanged函数内，因此每次下拉框更改时都会调用它。 .on()适用于您正在使用它的内容，但只需要调用一次。您的balance div保留在ajax调用之间的页面上，因此每次点击该元素都将由.on()事件处理程序处理。

所以要修复它，将.on()代码块移到dropBoxChanged函数之外，它会正常工作（确保它在$(document).ready(...)函数内）。

此外，您有.slideUp来显示偶数行animations aren't supported on table rows。 .toggle()应该为您提供所需而不是.slideUp。

此外，我不知道如何最初隐藏行。

您可以通过两种方式隐藏偶数行：

我建议将偶数行服务器端设置为已设置为隐藏的类，如class="hide"（或不太受欢迎的内联选项style="display:none"）
< / LI>
在设置balance div内容后，在ajax回调函数中使用jQuery，然后调用类似

$('#balance > table tr:nth-child(even)').hide();

在动态表上显示隐藏行

1 个答案: