1 
<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>

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

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

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 调用而不断增加。

另外我不知道如何最初隐藏偶数行。

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

4

1 回答 1

0

...但是在第四次调用（显示，隐藏，显示，隐藏）之后第三次调用（显示，隐藏，显示）的奇数行（显示和隐藏下一行）的单击事件上的第二次 ajax 调用，并且它继续增加每次ajax调用。

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

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

此外，您必须.slideUp显示偶数行，但表格行不支持动画。 .toggle()应该为您提供所需的东西，而不是.slideUp.

另外我不知道如何最初隐藏偶数行。

隐藏偶数行的两种方法：

  1. 我建议将偶数行服务器端设置为已经设置为隐藏的类class="hide"（或不太受欢迎的内联选项style="display:none"）

  2. 在你的ajax回调函数中使用jQuery，在你设置你的balancediv内容然后调用类似的东西

$('#balance > table tr:nth-child(even)').hide();
于 2013-04-04T19:48:55.503 回答