показать скрытые строки в динамической таблице

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> 

Каждый четный ряд большой динамической таблицы имеет таблицу внутри, которая объясняет данные о строке для (нечетной строки). Я хочу сначала скрыть все четные строки (строки, в которых есть таблица внутри).

На событии нажатия каждой нечетной строки, я хочу, чтобы скрыть/отобразить следующий ровный ряд (который имеет таблицу внутри)

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.

Также я не знаю, как изначально скрыть даже строки.

EDIT: страница в двух словах - http://pastebin.com/QtTxXnzX

Answer 1

... но на второй АЯКС вызова по щелчку случае нечетного ряда (показывает и скрывает следующую строку) на третий вызов (шоу, скрыть, показать) после вперед звонок (шоу, скрыть, показать, скрыть), и он увеличивается и увеличивается с каждым вызовами 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.

Также я не знаю, как изначально скрыть даже строки.

Два способа можно скрыть даже строки:

1. Я рекомендую настройки даже строки на сторону сервера к классу, который уже установлен, чтобы скрыть, как class="hide" (или менее благополучные инлайн опция style="display:none")

2. Использование JQuery в вашей Ajax функции обратного вызова, после того, как вы установили что-то balance содержание DIV затем называют как

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