show hide rows on dynamic table

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>

Each even row of big dynamic table has a table inside that explains data about the row befor(odd row). I want to initially hide hide all even rows (rows which has a table inside).

On click event of each odd row I want to hide/unhide the next even row (which has a table inside)

this is my ajax calls

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

with this code I'm trying to slide even rows.

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

At first Ajax call everything works fine and each click shows or hides the next row but on second ajax call on click event of odd row (shows and hides next row) on third call (show, hide, show) after forth call(show, hide, show,hide) and it goes on and on increases with every ajax calls .

Also I don't know how to initially hide even rows.

EDIT: the page in a nutshell - http://pastebin.com/QtTxXnzX

Maybe a bit more code would be interesting. What is this #balance object ? — Romain Braun, Apr 04 '13 at 16:40
@Steve Yeah, I kind of guessed that... I meant I'd like to see your HTML code as well. Your table if you wish. — Romain Braun, Apr 04 '13 at 16:44
@RomainBraun its about 2k rows of code which part you want to see? — Mike Ezzati, Apr 04 '13 at 16:57
@Steve The table part. Where the #balance object is declared. If it's too long just upload it to pastebin. — Romain Braun, Apr 04 '13 at 17:01

score 0 · Answer 1 · edited May 23 '17 at 10:32

...but on second ajax call on click event of odd row (shows and hides next row) on third call (show, hide, show) after forth call(show, hide, show,hide) and it goes on and on increases with every ajax calls.

this is because your $('#balance').on("click", "table", ...) event handler is within the dropBoxChanged function and therefore called each time the drop down box changes. .on() is intended for what you're using it for but it only needs to be called once. Your balance div remains on the page between ajax calls so each click on that element will be handled by the .on() event handler.

so to fix it move the .on() code block outside of the dropBoxChanged function and it will work correctly (do make sure it's within a $(document).ready(...) function).

Also, you had .slideUp to show the even rows however animations aren't supported on table rows. .toggle() should get you what you need instead of .slideUp.

Also I don't know how to initially hide even rows.

Two ways you could hide the even rows:

I'd recommend setting the even rows server-side to a class that is already set to hide like class="hide" (or the less favored inline option style="display:none")
Use jQuery in your ajax callback function, after you set your balance div content then call something like

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

I moved it outside within $(document).ready(...) with no success. It needs to be inside dropBoxChanged function because when document is ready the ajax table isn't loaded yet. — Mike Ezzati, Apr 06 '13 at 20:59
I solved the problem with a dirty trick by removing and adding div element inside dropBoxChanged function. So every time it ads #balance element again and then sets event handler to it.Thanks your answer helped me alot — Mike Ezzati, Apr 06 '13 at 21:00
Now I'm initially hiding even rows but problem is after initial hide it sliding is not working at all and they remaining hidden. — Mike Ezzati, Apr 06 '13 at 21:03
@Steve you may want to use `.toggle` instead of `.slideUp`, table rows aren't supported in jQuery animations. — MikeM, Apr 07 '13 at 13:30

show hide rows on dynamic table

1 Answers1