Reputation: 781

jQuery toggle tr in table

Trying to toggle some tr's in my table when clicking on a tr. I have written code, but it doesn't seem to work.
enter image description here

It's originally written in php, but my php code is pretty confsing so I thought just capturing the output would help organize things.

So for example of what I want to happen is when I click folder1, I need folderContent1 to display.

The jQuery for some reason doesn't work for this.

Is it something wrong with the jQuery or must I display my php code?

EDIT .

        <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Secure Login: Protected Page</title>
        <script type="text/Javascript" src="js/jQuery-1.7.js"></script>
        <link rel="stylesheet" href="styles/main.css" />
    </head>
    <body>

            <p>Welcome joshbarber89!</p>
            <p>
                <table>
                    <tr>
                        <td>Admin Tools:</td>
                    </tr>
                    <tr>
                        <td>Register a user <a href='register.php'>here</a></td>
                    </tr>
                    <tr>
                        <td>Edit/Delete user <a href='editList.php'>here</a></td>
                    </tr>
                    </table>
                    <br/>
                    <table>
                    <tr>
                        <td>Create new folder <a href='createFolder.php'>here</a></td>
                    </tr>
                    <tr>
                        <td>Add <a href='add_content.php'>content</a></td>
                    </tr>
                    </table>

                    <p> Content: </p>
                        <table id='content'>
                        <tr>
                        <td width='50'></td><td>Folder Name</td><td>Tools</td><tr id='folder1'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>a</td></td><td><a href='edit_folder.php?id=1'>Edit</a> <a href='delete_folder.php?id=1'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>a</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=24'>Edit</a> <a href='delete_content.php?id=24'>Remove</a></td></tr><tr class='folderContent1'><td width='150'>stuff in a</td><td width = '100'><a href=uploads/Interprovincial%20-%20Territorial%20Protocol%20%5B02-Apr-2002%5D.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=25'>Edit</a> <a href='delete_content.php?id=25'>Remove</a></td></tr><tr id='folder2'><td><img src='images/folder.gif' alt='...' height='30' width = '30'/><td width='150'>blah</td></td><td><a href='edit_folder.php?id=2'>Edit</a> <a href='delete_folder.php?id=2'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>stuff</td><td width = '100'><a href=uploads/dir615_manual_100.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=22'>Edit</a> <a href='delete_content.php?id=22'>Remove</a></td></tr><tr class='folderContent2'><td width='150'>asdasdasd</td><td width = '100'><a href=uploads/sbcon_admin.pdf target='_blank'><img src='images/PDFIcon.jpg' alt='...' height='30' width = '30'></a></td><td><a href='edit_content.php?id=23'>Edit</a> <a href='delete_content.php?id=23'>Remove</a></td></tr></table>
                <script>
                    $(document).ready(function(){
                        var count = $('#content tr').length;
                        for(var i = 0; i< count; i++)
                        {
                            $('.folderContent'+i).hide();
                            $('#folder'+i).click(function(){

                                $('.folderContent'+i).toggle();
                            });
                        }
                    });
                </script>               
                <p>If you are done, please <a href="includes/logout.php">log out</a>.</p>
            </p>
            <p>Return to <a href="login.php">login page</a></p>
            </body>
</html>

No errors in console

Upvotes: 0

Answers (5)

Pavdro

Reputation: 427

What I like to do in these cases is debug every step put alert or console.log in your js to check if it runs at all.

$(document).ready(function(){
    var count = $('#content tr').length;
    for(var i = 0; i< count; i++)
    {
        console.log('inside loop ' + i);
        $('.folderContent'+i).hide();
        $('#folder'+i).click(function(){
            console.log('clicked on row');
            console.log(this);
            $('.folderContent'+i).toggle();
        });
    }
});

Also, I would not put i inside the click function. Better get the id from the element you clicked on.

UPDATE

Thad suggested best way of getting Id. Create your tr as follows

> <tr id='folder1' data-child-id='1'></tr>

And update on click event.

$('#folder'+i).click(function(){
    var childId = $(this).data('child-id');
    $('.folderContent'+ childId ).toggle();
});

Upvotes: 1

Thad Blankenship

Reputation: 2302

There are many ways to do this but I'll show you a quick example of how I'd go about it, assuming you can have a variable number of children.

Here's a jsfiddle: http://jsfiddle.net/cpsmLayL/

Using data attributes we can add custom data pairing one parent to many children, and toggle based on that. For each parent tr we add data-show-child="{parentnumber}" and then for each child of that parent we add the class child-{parentnumber}.

I know the example is a little sloppy but it gives you a general idea.

Here's another example using tbody's to wrap parents and children. I think I prefer it.

http://jsfiddle.net/cpsmLayL/1/

Upvotes: 1

webNeat

Reputation: 2828

An alternative solution could be to use personal attributes like this

<table>
    <tr data-id="1" ... ></tr>
    <tr data-parent-id="1" ... ></tr>
    <tr data-parent-id="1" ... ></tr>
    <tr data-id="2" ... ></tr>
    <tr data-parent-id="2" ... ></tr>
    <tr data-parent-id="2" ... ></tr>
</table>
<script type="text/javascript">
    $('tr[data-id]').click(function(){
        var id = $(this).attr('data-id');
        $('tr[data-parent-id="'+id+'"]').toggle();
    });
</script>

I guess this is more clean and fast

Upvotes: 0

Aboca

Reputation: 575

A better approach which works as expected using an attribute to point out the index of the contents:

http://jsfiddle.net/x2x0rguj/

HTML:

<table id='content'>
    <tbody>
        <tr class="folder" index="1">
            <td>folder1</td>
        </tr>
        <tr class="folderContent1">
            <td>content</td>
        </tr>
        <tr class="folderContent1">
            <td>content</td>
        </tr>
        <tr class="folder" index="2">
            <td>folder2</td>
        </tr>
        <tr class="folderContent2">
            <td>content</td>
        </tr>
        <tr class="folderContent2">
            <td>content</td>
        </tr>
    </tbody>
</table>

JS:

$(document).ready(function () {
     var count = $('#content tr').length;
     for (var i = 0; i < count; i++) {
         $('.folderContent' + i).hide();

     }

     $('.folder').click(function () {
         $('.folderContent' + $(this).attr("index")).toggle();
     });
 });

Upvotes: -1

user346522

Reputation:

You're running into one of the common gotcha's with closures. By the time the click handler is called i = count, so all buttons click handlers will toggle the last element.

You can fix this by wrapping the body of the loop in an immediately invoked function.

for(var i = 0; i < count; i++) {
  (function(i) {
    $('.folderContent'+i).hide();
    $('#folder'+i).click(function() {
      $('.folderContent'+i).show();
    });
  })(i);
}

Upvotes: 2

jQuery toggle tr in table

Answers (5)

Related Questions