How to remove 'selected' class of row when clicking outside of row?

How to remove 'selected' class of row when clicking outside of row?

dataphpmysqldataphpmysql Posts: 65Questions: 17Answers: 0

Hello,

So I'm trying to remove the 'selected' class when clicking outside of the table (i.e. the 'body html but not the row) but haven't been able to make it happen. This is the code that I have so far to allow 'selected' class when table row is clicked:

            $('#dtBasicExample tbody').on('click', 'tr', function () {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            });

Now I want to add code that will remove 'selected' class when user clicks anywhere and anything other than a row. How can I make this happen? I've tried things like this but doesn't work:

            $('body').click(function () {
                $('#dtBasicExample tbody tr').click(function () {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                });
                table.$('tr.selected').removeClass('selected');
            });

Thanks in advance.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    You definitely to want to create an event handler within another event like your second snippet. Each time you click the body a new event handler will be created resulting in the handler being executed multiple times.

    Something like this example seems to work:
    http://live.datatables.net/xixegiju/1/edit

    Note the use of event.stopPropagation.

    Kevin

  • dataphpmysqldataphpmysql Posts: 65Questions: 17Answers: 0

    Awesome, it worked, thank you!!

    One last thing, I have child rows on my table like this: https://datatables.net/examples/api/row_details.html

    The remove 'select' class works only on regular rows but doesn't work on child rows, any idea why? So basically, if I click a child row, it will become highlighted; but if I click another child row or any other row for that matter, the first child row will still have the 'select' class and still be highlighted. So what this mean is that I could have more than one child row at a time with the 'select' class but I only want one child row highlighted at a time (just like the other regular rows). Any idea how to make this happen? Thanks.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    The child detail rows are controlled by you not Datatables. Datatables doesn't control or know anything about the structure child HTML structure. If you followed the example you would use the format() function to build the child rows. This is custom to your environment. The best option would be to provide a simple test case of the child rows so we can see what you are doing with the select class.

    Kevin

  • dataphpmysqldataphpmysql Posts: 65Questions: 17Answers: 0

    So here is an example with child rows: http://live.datatables.net/xixegiju/4/edit

    What I'm trying to do is to avoid the 'shadow' on the child rows. Perhaps it can be done with CSS like this fiddle: http://jsfiddle.net/v29ek1ob/3/. But not sure how to combine that with the 'selected' example above. If the user clicks the child row (which again it would not show any 'shadow') I want the parent row to still be 'selected', but if they click another parent row or child row then of course I want the new focus to be on the newly selected parent row. Any idea how t do this? I feel like I'm kinda close but haven't been able to put the two together.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    Maybe something like this:
    http://live.datatables.net/xixegiju/5/edit

    Add a class to each row in the child and use jQuery not selector to ignore the child rows.

    Kevin

  • dataphpmysqldataphpmysql Posts: 65Questions: 17Answers: 0

    That's definitely an improvement. I added the CSS to avoid the highlight on the child rows and it now looks like this: http://live.datatables.net/baruciri/1/edit

    The only thing left is that when the user click the child row, to still show that parent row 'selected'. Right now if you click a child row it will make the parent row 'un-select'. Any idea how to fix this?

  • dataphpmysqldataphpmysql Posts: 65Questions: 17Answers: 0

    Finally figured it out.

    Just added:

        $('#example tbody').on('click', 'tr:not([role="row"])', function (event) {
        console.log('child click event');
          event.stopPropagation();
    });
    

    Not sure if that's the correct way to do it, but it works. Here is the final result: http://live.datatables.net/baruciri/2/edit

    Thanks for the help!

This discussion has been closed.