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 呼び出しではすべてが正常に動作し、クリックごとに次の行が表示または非表示になりますが、2 回目の ajax 呼び出しでは、奇数行のクリック イベント (次の行の表示と非表示) の 3 回目の呼び出し (表示、非表示、表示) で、4 回目の呼び出し (表示、非表示)非表示、表示、非表示) が続き、すべての ajax 呼び出しで増加します。

また、最初に偶数行を非表示にする方法もわかりません。

編集：一言で言えばページ - http://pastebin.com/QtTxXnzX

4

1 に答える 1

0

...しかし、4回目の呼び出し（表示、非表示、表示、非表示）の後の3回目の呼び出し（表示、非表示、表示）で、奇数行のクリックイベント（次の行を表示および非表示）の2回目のajax呼び出しで、それはどんどん増加しますすべての ajax 呼び出しで。

これは、$('#balance').on("click", "table", ...)イベント ハンドラーがdropBoxChanged関数内にあり、ドロップダウン ボックスが変更されるたびに呼び出されるためです。 .on()あなたがそれを使用していることを意図していますが、一度だけ呼び出す必要があります。divbalanceは ajax 呼び出し間でページに残るため、その要素をクリックするたびに.on()イベント ハンドラーによって処理されます。

.on()そのため、コード ブロックを関数の外に移動するdropBoxChangedと、正しく動作します ($(document).ready(...)関数内にあることを確認してください)。

また、.slideUp偶数行を表示する必要がありましたが、表の行ではアニメーションがサポートされていません。 .toggle()の代わりに必要なものを取得する必要があります.slideUp。

また、最初に偶数行を非表示にする方法もわかりません。

偶数行を非表示にする 2 つの方法:

  1. サーバー側の偶数行を、既に非表示にするように設定されているクラスに設定することをお勧めしますclass="hide"(またはあまり好まれないインライン オプションstyle="display:none") 。

  2. ajaxコールバック関数でjQueryを使用し、balancedivコンテンツを設定してから次のようなものを呼び出します

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